Question

$('#x, #y').click(function() {
        $('#x, #y').toggleClass('try-effect-a try-effect-b');
    })

.try-effect-a {
  color: red;
 }
 .try-effect-b {
  color: blue;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn try-effect-a' type='button' id='x'>X</button>
<button class='btn try-effect-a' type='button' id='y'>Y</button>

您好，在我的脚本中，我希望通过切换，a将效果从b更改为class，

我现在的问题是，我想每次点击只更改一个按钮而不是其中两个按钮，当我删除try-时，它也无法正常工作

但我想在一个函数中执行此操作，而不是为每个.click执行两个id函数。

Answer 1

选择确切的元素使用this作为上下文。它选择你点击的元素。

$('#x, #y').click(function() {
        $(this).toggleClass('try-effect-a try-effect-b');
    })

.try-effect-a {
  color: red;
 }
 .try-effect-b {
  color: blue;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn try-effect-a' type='button' id='x'>X</button>
<button class='btn try-effect-a' type='button' id='y'>Y</button>

Answer 2

在事件处理程序中，this是事件发生在匹配选择器上的元素实例

＆＃13;

$('#x, #y').click(function() {
     $(this).toggleClass('try-effect-a try-effect-b');
 })

＆＃13;

.try-effect-a {
  color: red;
 }
 .try-effect-b {
  color: blue;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn try-effect-a' type='button' id='x'>X</button>
<button class='btn try-effect-a' type='button' id='y'>Y</button>

＆＃13;

两个按钮在一个功能中分别由他们的班级切换

2 个答案: