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

yh2wf1be 于 2023-01-20 发布在 jQuery

关注(0)|答案(1)|浏览(134)

在这里，我试图在“.tt-select”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');
}
});

Here is the ".tt-select" select fields.
And here is the ".ingradient" class where I need to add classes individually.
希望有人能帮我找出如何正确使用$这个关键字在这里。谢谢

***[EDIT]***收到评论建议后，我尝试了以下方法，但仍然没有成功：

$('.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');
  }
});

jquery

来源：https://stackoverflow.com/questions/75173919/using-this-keyword-to-add-remove-class-on-onchange-using-jquery

1条答案

按热度按时间

o3imoua41#

重要的事情先做：选项无法设置样式

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

执行时的函数类型和作用域：

他说...
您最新方法的问题是试图在change事件处理程序内部定义的回调中使用this，稍后您将把该回调传递给setTimeout。
在执行时，此类函数将this设置为window，因此.find操作不会返回所需的结果。它将获取window（全局范围）伞中与该选择器匹配的***ALL***元素。
而您需要保留目标选择元素的范围。
问题的快速解决方案是正确定义回调函数，该函数将保留正确的作用域，并将直接访问已包含所选选项的变量，而不是再次查询文档。
这里我简化了您的示例，只添加/删除一个类，并使用两个不同的下拉菜单，以显示在一个下拉菜单上执行操作时，另一个不会受到影响。
我使用了一个名为$selectedOption的变量（使用$只是因为当时的约定是将其标记为jQuery Package 器对象，而不是普通的HTMLElement），该变量在回调中得到重用：

$('.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来展示值的类型）：
一个二个一个一个

赞(0）回复(0）举报 2023-01-20

我来回答

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

1条答案

重要的事情先做：选项无法设置样式

执行时的函数类型和作用域：

相关问题

热门标签

最新问答