使用 $this 关键字使用 jquery 在 onChange 上添加/删除类-解网

问：

在这里，当“.tt-select”选择更改时，我尝试在此“.ingradient”类元素中添加一些类。所以，我快到了。但是当我选择该选项时，会出现一个“.ingradient”项目列表。我需要为我们当前选择的特定人员执行以下代码。我知道我们可以使用$this关键字，但我不能为它编写代码。请帮忙。谢谢

$('.tt-select').change(function(){
  $('.ingradient').addClass('animate__animated animate__heartBeat');
const remClass = setTimeout(fnRemClass, 2000);
function fnRemClass() {
  $('.ingradient').removeClass('animate__animated animate__heartBeat');
}
});

我尝试过但没有成功。

$('.tt-select').change(function(){
$('.ingradient', this).addClass('animate__animated animate__heartBeat');

const remClass = setTimeout(fnRemClass, 2000);
function fnRemClass() {
  $('.ingradient', this ).removeClass('animate__animated animate__heartBeat');
}
});

这是“.tt-select”选择字段。

这是“.ingradient”类，我需要在其中单独添加类。

希望有人可以帮助我了解如何在此处正确使用$this关键字。谢谢

[编辑]在收到评论建议后，我尝试了这个，但仍然没有成功：

$('.tt-select').change(function(){  
  $(this).find(':selected')
    .addClass('animate__animated animate__heartBeat');
  const remClass = setTimeout(fnRemClass, 2000);
  function fnRemClass() { 
    $(this).find(':selected')
      .removeClass('animate__animated animate__heartBeat');
  }
});

javascript jquery 这个

当您使用函数表示法设置更改事件处理程序时，您可以使用函数表示法来引用触发事件的元素。因此，在您的事件处理程序中，只需选择具有该类的所有后代。如果需要选定的选项元素，请执行或.change(function(){...$(this)<select>$(this).find('.ingradient')ingradient$(this).find('> [selected]').find(':selected');

0赞 Lawrence Cherone 1/19/2023

const elm = $('option:selected', this).addClass('selected'); setTimeout(() => elm.removeClass('selected'), 2000)

0赞 Lawrence Cherone 1/19/2023

这回答了你的问题吗？jQuery select change event get selected 选项

0赞 zahid3d29 1/20/2023

@LawrenceCherone对不起，不行。在控制台上尝试过。

$('.tt-select').change(function(){   const elm = $('option:selected', this).addClass('animate__animated animate__heartBeat'); setTimeout(() => elm.removeClass('animate__animated animate__heartBeat'), 2000) });

答：

1赞 Diego D 1/19/2023 #1

首先：选项无法设置样式

第一件事：我应该说你不能正确地设置元素的样式。我的意思是，当然，使用类并根据这些标准执行选择仍然是合法的，但是样式本身对于选项来说非常有限。这就是为什么通常非常时尚的下拉列表实际上是真实元素之上的自定义元素。但是，将它们用作实用程序类是完全合法的。<option><select>

执行时的函数类型和范围：

说...

最新方法的问题在于尝试在更改事件处理程序中定义的回调中使用，稍后将传递给该回调。thissetTimeout

此类函数在执行时将设置为因此操作不会执行，返回所需的结果。相反，它将在（全局范围）的保护伞中获取与该选择器匹配的所有元素。thiswindow.findwindow

相反，您需要保留目标选择元素的范围。

问题的快速解决方案是正确定义一个回调，该回调将保留正确的范围，并将直接访问已包含所选选项的变量，而不是再次查询文档。

在这里，我简化了您的示例，仅添加/删除一个类并具有两个不同的下拉列表，以表明在一个下拉列表上执行某些操作时，另一个下拉列表不会受到影响。

我使用了一个名为（使用 $ 只是因为它是当时的约定，将其标记为 jQuery 包装器对象而不是普通的 HTMLElement），该变量在回调中被重用：$selectedOption

$('.tt-select').change(function(){  

  //fetching the selected option for the dropdown firing the change event
  const $selectedOption = $(this).find(':selected');  
  
  $selectedOption.addClass('customclass');
  console.log('class added to selected option')
  
  const callback = ()=>{ 
    $selectedOption.removeClass('customclass');
    console.log('class removed from selected option')
  };
   
  setTimeout(callback, 2000);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="tt-select">
  <option value="" selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

<select class="tt-select">
  <option value="" selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

在这里，我做了一个非常简单的演示，展示了定义函数的不同方法，这些函数将登录控制台的不同值（我用来展示值的类型）：this.constructor.name

$('.tt-select').change(function(){  

  console.log(`change event handler... 'this' value type: [${this.constructor.name}]`);

  //fetching the selected option for the dropdown firing the change event
  const selectedOption = $(this).find(':selected');  

  //callback defined with the function notation and no variable set explicitely
  function callback1(){ 
    console.log(`Callback[1] executing... 'this' value type: [${this.constructor.name}]`);        
  };  
  
  //callback defined with the function notation setting the scope variable callback2
  const callback2 = function(){ 
    console.log(`Callback[2] executing... 'this' value type: [${this.constructor.name}]`);    
  };
  
  //callback defined as an arrow function setting the variable callback3
  const callback3 = ()=>{ 
    console.log(`Callback[3] executing... 'this' value type: [${this.constructor.name}]`);    
  };
   
  setTimeout(callback1, 500);  
  setTimeout(callback2, 500);  
  setTimeout(callback3, 500);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="tt-select">
  <option value="" selected></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

上一个：有没有办法多次使用关键字（this）

下一个：使用 OOP 切换 3+ 个元素

使用 $this 关键字使用 jquery 在 onChange 上添加/删除类

Using $this keyword to add/remove class on onChange using jquery

评论

首先：选项无法设置样式

执行时的函数类型和范围：