javascript - 我可以使用 jQuery 来独立定位 CSS 类的实例吗？

Question

我正在寻找使用 jQuery 来更改单击时 div 的背景颜色(我已经开始工作了!)但是一次单击会更改此时所有的 div 颜色，我想知道是否有任何如何在不影响其他元素的情况下更改已单击的特定元素的颜色？

$(document).ready(function() {
  $(".bg").click(function() {
    $(".bg").css("background-color", "red");
  });
});

.bg {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<p>A function is triggered when the div element is clicked. The function sets the background-color of the div element to red.</p>

JSFiddle 也在这里:https://jsfiddle.net/davywest1000/jd82hq5t/2/

提前致谢!

Answer 1

您只需使用 $(this) 关键字来引用被点击的元素。

注意删除内联事件 onclick="colorSwitch()" 因为您已经在 J​​S 代码中附加了事件并且如果您想调用函数 colorSwitch 你可以在事件中调用它。

$(document).ready(function() {
  $(".bg").click(function() {
    $(this).css("background-color", "red");
  });
});

.bg {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>