Question

我有 4 div 与相同类和ID。我要找的是在点击display-none时删除该特定div上的#button - 类。

我现在所做的是为每个div提供一个额外的类名，以便它们更适用于jQuery ＆＃34;可识别＆＃34; 。

这是我的代码：

HTML 的

<div class="parentdiv">
  <h3 id="button">remove class</h3>
  <div class="display-none" id="element">
    Show me on button click
  </div>
</div>

jquery的

$('h3#button').each(function(i){
  $(this).addClass('remove-btn-' + (i+1));
});

$('div#element').each(function(i){
  $(this).addClass('remove-this-' + (i+1));
});

所以我要找的是循环遍历remove-this-1，remove-this-2等，并在点击display-none，remove-btn-1等时删除remove-btn-2类。

Answer 1

再使用一个课程div display-none课程
为每个按钮提供相同的课程
将它们包裹在父母中
使用this来实现目标

每当您点击该按钮时，它将查找当前单击该按钮的课程box。出于演示目的 - 我已将CSS应用于display-none类，以便您可以看到更改。

＆＃13;

$(document).ready(function(){
   $('.button').click(function(){
     $(this).prev('.box').removeClass('display-none');
   });
});

＆＃13;

.display-none {
  display: inline-block;
  padding: 5px;
  background: tomato;
  color: #fff;
  border-radius: 3px;
}
.button {
  display: inline-block;
  padding: 5px;
  background: steelblue;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="display-none box">Lorem ispum 0...</div>
  <p class="button">Remove Class</p>
</div>

<div class="parent">
  <div class="display-none box">Lorem ispum 1...</div>
  <p class="button">Remove Class</p>
</div>

<div class="parent">
  <div class="display-none box">Lorem ispum 2...</div>
  <p class="button">Remove Class</p>
</div>

<div class="parent">
  <div class="display-none box">Lorem ispum 3...</div>
  <p class="button">Remove Class</p>
</div>

＆＃13;

Answer 2

你在寻找像这样的东西

＆＃13;

$('.button').click(function(){
  	$(this).next().removeClass('display-none');
});

＆＃13;

.display-none{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
  <h3 class="button">remove class</h3>
  <div class="display-none element">
    Show me on button click 1
  </div>
</div> 
<div class="parentdiv">
  <h3 class="button">remove class</h3>
  <div class="display-none element">
    Show me on button click 2
  </div>
</div> 
<div class="parentdiv">
  <h3 class="button">remove class</h3>
  <div class="display-none element">
    Show me on button click 3
  </div>
</div> 
<div class="parentdiv">
  <h3 class="button">remove class</h3>
  <div class="display-none element">
    Show me on button click 4
  </div>
</div>

＆＃13;

Answer 3

首先，id（＃）值必须是唯一的。我建议你创建独特的ID。

要使用jquery从元素中删除类，可以使用.removeClass（'class_name'）

使用循环/数组从div中删除类

3 个答案: