Question

初学者。我制作了一些简单的代码，当我点击一个按钮时，它会为某些图像添加一个类。当我单击具有该类的图像时，我想从具有该类的所有元素中删除该类。但是，我似乎无法删除该课程。这是所有相关的HTML / CSS：

11/28/2016 12:00:00 sensor triggered
11/29/2016 00:00:05 sensor triggered
11/29/2016 05:00:00 sensor triggered

和javascript

.us{
    border-style:solid;
    border-color:#ff0000;
    }

...

<button id="us_select"> select American films </button><br>
<!--When I click this button, all images of American films will have red borders by 
adding the "us" class--> 

<img id="sutter" src="sutter.png" alt="sutter">
<img id="theo" src="her.png" alt="theo">
<img id="holly" src="holly.png" alt="holly">
<img id="matsu" src="matsu.png" alt="matsu">
<img id="jesse" src="jesse.png" alt="jesse">

我认为$(document).ready(function(){ $("#us_select").click(function(){ $("#sutter,#theo,#holly,#jesse").addClass("us"); //adds "us" class to the four images. }); $(".us").click(function(){ $(this).removeClass("us"); //removes "us" class from images and thus removing red borders. }); });是我问题的根源。我相信$(".us").click(function()说当我点击带有$(".us").click(function()类的html元素时，会选择所有带有us类的元素并删除us类。但是当我点击us类的图像时，没有任何反应。有什么想法吗？

我注意到这段代码有效，并且是我正在寻找的。

us

但是当我点击任何图片而不是仅使用类$("img").click(function(){ $(.us).removeClass("us"); });的图片时，此代码会移除us类。

Answer 1

此代码运行一次：

$(".us").click(function(){
    //...
});

当页面加载时，

和仅一次。那时，该选择器找不到与该类匹配的元素。因此，没有分配点击处理程序。

由于元素的性质会动态变化，因此将单击处理程序添加到更高级别的公共父元素（或仅document本身），并在单击时动态地过滤选择器。像这样：

$(document).on("click", ".us", function(){
    //...
});

这仍会在页面加载时添加一次点击处理程序，但会将其添加到document。哪个没有变化。任何时候document处理click事件，参数列表中的（可选）第二选择器在那时被评估，以在调用处理函数之前过滤事件源。

Answer 2

您必须使用event delegation，因为加载时不存在us类：

$(document).on('click', 'img.us', function() {
   $('.us').removeClass('us');
})

通过这种方式，您委派 click事件到加载时出现的元素（文档）

Answer 3

为元素分配另一个类.off，然后再定位该类。

段

$(document).ready(function() {
  $("#us_select").click(function() {
    $(".off").addClass("us");

  });
  $(".off").click(function() {
    $(this).removeClass("us");

  });
});

.us {
  border-style: solid;
  border-color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://placehold.it/50x50/000/fff?text=1' class='off'>
<img src='http://placehold.it/50x50/00f/eee?text=2' class='off'>
<img src='http://placehold.it/50x50/0e0/111?text=3' class='off'>
<img src='http://placehold.it/50x50/f00/fff?text=4' class='off'>
<img src='http://placehold.it/50x50/fc0/000?text=5' class='off'>
<img src='http://placehold.it/50x50/fff/000?text=6' class='off'>
<button id="us_select">select American films
</button>

$（class）.click（）不起作用

3 个答案:

段