Question

我有以下HTML：

myService.loadFromService();

我正在使用以下脚本更改div上的类：

<div class="wrap">
div class="red" id="ch1">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
...
<div class="green" id="ch..">Content</div>
</div>

我想拥有或所有＆＃34; red＆＃34;或只是一个＆＃34;绿色＆＃34;每一个div＆＃34;包装＆＃34;没有取消（转换为红色）所有Divs到所有＆＃34;包装＆＃34;

Answer 1

在添加/删除类时，您只需要定位兄弟元素，而不是所有绿色元素

$('.red, .green').on('click', function() {
  $(this).siblings(".green").removeClass("green").addClass("red");
  $(this).toggleClass('red green');
});

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>

  <div class="red" id="ch..">Content</div>
</div>

或使用事件委托模型

$('.wrap').on('click', '.red, .green', function() {
  $(this).siblings(".green").removeClass("green").addClass("red");
  $(this).toggleClass('red green');
});

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>

  <div class="red" id="ch..">Content</div>
</div>

Answer 2

$('.red, .green').on('click', function() { 
  $(".green").prop("class", "red");
  $(".red").prop("class", "green");
}

Answer 3

尝试使用if... else声明;如果点击的元素具有类.red，则在父.green内切换.red到.wrap，然后将类从.green切换为.red。如果点击的元素具有从.green到.red的课程.green切换课程

$(".red , .green").click(function(e) {
  if ($(this).is(".red")) {
   $(this).parent(".wrap").find(".green").toggleClass("red green")
   .end().find(this).toggleClass("green red");
  } else {
    $(this).toggleClass("red green")
  }
});

.red {
  background-color: #CC0000;
}
.green {
  background-color: #009900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>
...
<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>
  <div class="green" id="ch..">Content</div>
</div>

JQuery在多个div中切换和删除css类

3 个答案: