jQuery：如何从多个具有相同类的元素中仅选择一个元素？

Question

当用户单击按钮=IF(OR(A1="apples", A1="bananas", A1="pear", A1="plumb"), 1) 时，我试图出现两个div，.before-cart和.after-cart。

HTML：

.slide-button

一些有效的jQuery：

<div class="before-cart"></div>
<a href="" class="slide-button"></a>
<div class="after-cart"></div>

当用户在上方选择$('.col-full').on('click', '.slide-button', function() { $('.before-cart, .after-cart').css('visibility', 'visible'); }); 时，将选择具有该类的每个元素。

我已经认识到.slide-button可能会解决我的问题，但是，我在重写jQuery时遇到了麻烦，因此$(this)和.before-cart在某种程度上包含在.after-cart函数中。这是我得到的最接近的结果，无法正常运行：

.slide-button

Answer 1

我将以最接近的容器为目标，同时将推车之前和推车之后的子容器作为最近的容器，然后使用find（）锁定特定的类。这样，您可以轻松使用$（this）。

祝你好运

$('.slide-button').on('click', function(){
  //$(this).closest('.before-cart, .after-cart').css('visibility','visible');   
  $(this).closest(".container").find(".before-cart, .after-cart").toggle();
  
  // can also use .show() or .hide() if you dont want to toggle
});

.before-cart{
  width: 50px;
  height: 50px;
  float: left;
  background: orange;
  text-align: center;
  line-height: 50px;
}

.after-cart{
  width: 50px;
  height: 50px;
  float: left;
  background: green;
  text-align: center;
  line-height: 50px;
}

.container{
  margin: 10px;
  border: 2px solid #CCC;
  height: 50px;
}

.slide-button{
 float: left; 
 height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div class="container">  
  <div class="before-cart">before</div>
  <button class="slide-button">SlideButton</button>
  <div class="after-cart">after</div>    
</div>

<div class="container">  
  <div class="before-cart">before</div>
  <button class="slide-button">SlideButton</button>
  <div class="after-cart">after</div>    
</div>

<div class="container">  
  <div class="before-cart">before</div>
  <button class="slide-button">SlideButton</button>
  <div class="after-cart">after</div>    
</div>