Question

我试图让我的JS逻辑使用$（this），这样我就可以在同一页面的多个元素中重复使用我的代码，这样它们就可以单独触发。

这是我的JS代码：

$(".fab").on("click", function(){
  $(this).toggleClass("clicked");
  $(".screen2").addClass("active");
  $(".box2 ,.box1 ,.box3").addClass("active");
});

$("#close").on("click", function(){
  $(".screen2").removeClass("active");
  $(".fab").removeClass("clicked");  
  $(".box1 ,.box2 ,.box3").removeClass("active");  
});

我的HTML：

    <div class="app"> 
  <div class="header"></div>
  <div class="content">
    <h1>Click the fab</h1>
  </div>
  <div class="fab"></div>
  <div class="screen2">
    <h1>new window</h1>
    <div id="close"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</div>

我怎样才能正确使用$（这个）？我试图做的就是让JS代码可以重复用于同一页面中的多个元素，这样它只会触发我单击.fab按钮的元素......

Answer 1

您还需要使用$(this), .prev(), .next(), .find(), .closest()等来遍历DOM以引用您正在处理的元素附近的元素，否则它将定位文档中的所有类。

$(".fab").on("click", function(){
  $(this).toggleClass("clicked");
  $(this).next(".screen2").addClass("active");
  $(this).next(".screen2").find(".box2 ,.box1 ,.box3").addClass("active");
});

$("#close").on("click", function(){
  $(this).closest(".screen2").removeClass("active");
  $(this).closest(".screen2").prev(".fab").removeClass("clicked");  
  $(this).closest(".screen2").find(".box1 ,.box2 ,.box3").removeClass("active");  
});

Answer 2

你可以将jQuery选择器存储在一个数组中，遍历它，对于数组中的每个jQuery选择器，使用jQuery的.each()来迭代它的内部元素。

在以下示例中，例如，DOM中可能有多个class1实例。

var arrElements = [$('#id1'), $('#id2'), $('.class1')];
for (var i = 0; i < arrElements.length; i++) {
  arrElements[i].each(function() {
    $(this).on('click', function() {
      // do stuff (use $(this) to refer to the current object)
    });
  })
}

如何使用$（this）创建一个可重用的元素只触发单击的元素

2 个答案: