如何分别为每个容器运行jQuery函数？

Question

我有一个简单的jQuery函数，它允许我在点击时隐藏/显示元素。 隐藏/显示工作正常，但我试图分别为每个元素运行此函数。

我尝试使用.each函数执行此操作，但我失败了。

怎么可以这样做？

＆＃13;

＆＃13;

$(".item-closed").on("click", function () {
    $(".item-details").addClass("active");
    $(".item--config").addClass("active");
  });

  $(".item-opened").on("click", function () {
    $(".item-details").removeClass("active");
    $(".item--config").removeClass("active");
  });

＆＃13;

.item-details{
  color: #09c;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
}

.item-opened{
  display: none;
}


.item-details.active .item-opened{
  display: inline-block;
}

.item-details.active .item-closed{
  display: none;
}

.item--config{
  display: none;
}

.item--config.active{
  display: block;
}

＆＃13;

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

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>  

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试以下代码。

$(".item-closed").on("click", function () {
    $(this).addClass("active");
    $(this).addClass("active");   });

  $(".item-opened").on("click", function () {
    $(this).removeClass("active");
    $(this).removeClass("active");   });

Answer 2

  

如果您不想更改html，有多种解决方案   可以通过parent()识别出来。

试一试：

$(".item-closed").on("click", function () {
    $(this).parent().parent().find(".item-details").addClass("active");
    $(this).parent().parent().find(".item--config").addClass("active");
  });

  $(".item-opened").on("click", function () {
    $(this).parent().parent().find(".item-details").removeClass("active");
    $(this).parent().parent().find(".item--config").removeClass("active");
  });

.item-details{
  color: #09c;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
}

.item-opened{
  display: none;
}


.item-details.active .item-opened{
  display: inline-block;
}

.item-details.active .item-closed{
  display: none;
}

.item--config{
  display: none;
}

.item--config.active{
  display: block;
}

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

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>

Answer 3

查看更改并查看是否符合您的需求

$(".item-closed").on("click", function () {
    $(this).closest(".container").find(".item-details").addClass("active");         //changed
    $(this).closest(".container").find(".item--config").addClass("active");         //changed
  });

  $(".item-opened").on("click", function () {
    $(this).closest(".container").find(".item-details").removeClass("active");         //changed
    $(this).closest(".container").find(".item--config").removeClass("active");         //changed
  });

.item-details{
  color: #09c;
  margin-bottom: 10px;
  font-size: 14px;
  cursor: pointer;
}

.item-opened{
  display: none;
}


.item-details.active .item-opened{
  display: inline-block;
}

.item-details.active .item-closed{
  display: none;
}

.item--config{
  display: none;
}

.item--config.active{
  display: block;
}

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

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>

<div class="container">
<div class="item-details">
  <span class="item-closed">Details anzeigen</span>
  <span class="item-opened">Details ausblenden</span>
</div>

<ul class="item--config">
<li>option1</li>
<li>option2</li>  
<li>option3</li> 
<li>option4</li>  
</ul>
</div>