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/

提前致谢！

标签： javascriptjqueryhtmlcssclick

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>