Question

我写了jQuery函数，通过切换类来显示/隐藏div。下面的代码基本上可以正常工作。我无法做的是分别控制每个div。单击第二个div组将触发第一个。我该如何区分每个元素，并使相同的功能对两个组独立发挥作用？

function _open() {
  var nextDiv = $("#sub_container").find("[class]").map(function() {
    return this.className;
  }).get();
  $.unique(nextDiv).forEach(function(c) {
    $('.' + c).first().removeClass('close').addClass('open');
  });
}

function _close() {
  $('.open').not('.close').each(function(key, elm) {
    setTimeout(function() {
      $(elm).removeClass('open').addClass('close');
    }, key * 100);
  });
}

.container {
  float: left;
  display: inline;
}

.starter {
  display: block;
  width: 300px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
  margin-bottom: 10px;
  color: white;
}

.open {
  display: block;
  width: 300px;
  height: 100px;
  background-color: blue;
  margin-bottom: 10px;
  color: white;
}

.close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project1" class="container">
  <div class="starter" onclick="_open();">Each click will show a new div</div>
  <div id="sub_container">
    <div class="close">1</div>
    <div class="close">2</div>
    <div class="close">3<br><br><button onclick="_close();">click here to hide all divs</button></div>
  </div>
</div>

<div id="project2" class="container">
  <div class="starter" onclick="_open();">Each click will show a new div</div>
  <div id="sub_container">
    <div class="close"></div>
    <div class="close"></div>
    <div class="close"><button onclick="_close();">click here to hide all divs</button></div>
  </div>
</div>

Answer 1

代码中的一个问题是，您在HTML中有两个ID为sub_container的div，ID不应在同一页面上重复使用，它们是单个元素的唯一标识符。 / p>

但是，仅对其进行更改不会解决您的问题:)

$("#sub_container")太笼统了，它会在整个DOM中搜索具有该ID的元素，但是您要做的是在您刚刚单击的div的组中进行搜索。您可以使用siblings进行此操作。我已经更新了您发布的演示程序。

必须进行一些更改。

首先，我们需要知道单击了哪个元素。为此，我将链接onclick="_open()"更新为onclick="_open(event)"，该链接在调用时会传递click事件，我们可以使用它来确定单击了哪个元素。（您也可以使用this来简单地传递该元素，但由于最常见的情况是您看到了传递的事件，因此我选择了与此方式配合使用）

接下来，我们需要找到相关的子容器。那是这一行：

var $subContianer = $(e.currentTarget).siblings(".sub_container");

我正在使用事件的currentTarget（例如，绑定用于单击的元素），然后搜索类为sub_container的同级兄弟

说实话，您的下一部分代码对我来说似乎很奇怪，但是我将其保留为原样。我认为这可以更简单地完成。但是，我对其进行了更新，以使用$subcontainer.find来搜索要打开的div，而不是通用的$(selector)（出于与以前相同的“过于通用”的原因）

我没有更新结束代码，我认为对您来说，尝试这些原理并自己找出一点是一个不错的练习：）

祝你好运！

function _open(e) {
  var $subContianer = $(e.currentTarget).siblings(".sub_container");
  var nextDiv = $subContianer.find("[class]").map(function() {
    return this.className;
  }).get();
  
  $.unique(nextDiv).forEach(function(c) {
     $subContianer.find('.' + c).first().removeClass('close').addClass('open');
  });
}

function _close() {
  $('.open').not('.close').each(function(key, elm) {
    setTimeout(function() {
      $(elm).removeClass('open').addClass('close');
    }, key * 100);
  });
}

.container {
  float: left;
  display: inline;
}

.starter {
  display: block;
  width: 300px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
  margin-bottom: 10px;
  color: white;
}

.open {
  display: block;
  width: 300px;
  height: 100px;
  background-color: blue;
  margin-bottom: 10px;
  color: white;
}

.close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project1" class="container">
  <div class="starter" onclick="_open(event);">Each click will show a new div</div>
  <div class="sub_container">
    <div class="close">1</div>
    <div class="close">2</div>
    <div class="close">3<br><br><button onclick="_close();">click here to hide all divs</button></div>
  </div>
</div>

<div id="project2" class="container">
  <div class="starter" onclick="_open(event);">Each click will show a new div</div>
  <div class="sub_container">
    <div class="close"></div>
    <div class="close"></div>
    <div class="close"><button onclick="_close();">click here to hide all divs</button></div>
  </div>
</div>

简而言之：

绕过event，这样您就可以知道点击的起源
不是通过$('selector here')搜索整个DOM，而是通过找到要从中搜索的元素，然后使用.find

有关这些东西的文档： http://api.jquery.com/find/ https://api.jquery.com/siblings/

如何在两个分离（但相似）的元素上使用相同的功能？

1 个答案: