Question

我对主题的制定有问题。对不起，如果我重复问题。

我有十几个有两个孩子的容器。

<div class="some">
   <img id="1" class="pointer unactive" />
   <img id="2" class="pointer active" />
</div>
<div class="some">
   <img id="3" class="pointer unactive" />
   <img id="4" class="pointer active" />
</div>
<div class="some">
   <img id="5" class="pointer unactive" />
   <img id="6" class="pointer active" />
</div>

例如：当我点击img#3时，我想将其他孩子（#1, #3, #5）更改为active，然后点击元素和明喻（#2, #4, #6）到{{1} }。

Answer 1

让我们有另一个课程，告诉所有人都是getList和odd：

even

现在，点击<div class="some"> <img id="1" class="pointer odd unactive" /> <img id="2" class="pointer even active" /> </div> <div class="some"> <img id="3" class="pointer odd unactive" /> <img id="4" class="pointer even active" /> </div> <div class="some"> <img id="5" class="pointer odd unactive" /> <img id="6" class="pointer even active" /> </div>后，所有.even都会有even，所有active都会有odd个类，反之亦然：< / p>

inactive

注意： 请不要使用以数字开头的$(".even").click(function () { $(".even").addClass("active").removeClass("unactive"); $(".odd").addClass("unactive").removeClass("active"); }); $(".odd").click(function () { $(".odd").addClass("active").removeClass("unactive"); $(".even").addClass("unactive").removeClass("active"); });值。

工作代码段

id

$(function () {
  $(".even").click(function () {
    $(".even").addClass("active").removeClass("unactive");
    $(".odd").addClass("unactive").removeClass("active");
  });
  $(".odd").click(function () {
    $(".odd").addClass("active").removeClass("unactive");
    $(".even").addClass("unactive").removeClass("active");
  });
});

.unactive {background: #f99; width: 50px; height: 50px;}
.active {background: #99f; width: 50px; height: 50px;}

Answer 2

假设您想要交换当前的active和inactive元素，那么您可以使用toggleClass()。试试这个：

$('.pointer').click(function() {
    $('.pointer').toggleClass('active unactive');
});

Example fiddle

将单击元素（以及所有类似元素）更改为活动/非活动

2 个答案: