多个元素的类名相同,但在纯jQuery中独立执行事件

时间:2018-02-17 06:25:17

标签: jquery

大家好我想知道是否有办法按下目标按钮,只会影响该按钮,无论他们是否拥有相同的班级名称而且我不想按下目标

按钮和附加到该类名称的事件在所有这些上执行我只想在每个按钮上独立地执行该目标按钮的事件,而不是在所有这些按钮上执行一个按钮。我想知道如何在jQuery中做到这一点



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.x').click(function(){
  $('.x').css({'background-color': 'red'})
});
}); 
</script>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.x').click(function(){
  $(this).css({'background-color': 'red'})
});
}); 
</script>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>

答案 1 :(得分:1)

在点击事件中使用此功能。这将引用您单击的当前类。以下是代码段: -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.x').click(function(){
  $(this).css({'background-color': 'red'})
});
}); 
</script>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>
<button class='x'>Execute</button>