jquery - 切换当前事件父元素的子元素的类

Question

现在我有三个复选框部分 - 这是如何设置部分的示例:

<div class="color-swatches">
      <div class="swatch">
        <img src="/img/Apothecary_Swatch.jpg" class="swatch-icon image">
        <p class="color-name">Apothecary</p>
        <div class="check off"></div>
      </div>
      <div class="swatch">
        <img src="/img/Arbor_Swatch.jpg" class="swatch-icon image">
        <p class="color-name">Arbor</p>
        <div class="check off"></div>
      </div>
      <div class="swatch">
        <img src="/img/Bubble_Swatch.jpg" class="swatch-icon image">
        <p class="color-name">Bubbles</p>
        <div class="check off"></div>
      </div>
      <div class="swatch">
        <img src="/img/TransparentSpacer.gif" class="swatch-icon image">
        <p class="color-name">Classic</p>
        <div class="check off"></div>
      </div>
      <div class="swatch">
        <img src="/img/LadyBug_Swatch.jpg" class="swatch-icon image">
        <p class="color-name">Lady Bug</p>
        <div class="check off"></div>
      </div>
      <div class="swatch">
        <img src="/img/Burst_Swatch.jpg" class="swatch-icon image">
        <p class="color-name">Starburst</p>
        <div class="check off"></div>
      </div>

.color-swatches 包含某个部分的整个复选框选择。现在，我已经进行了设置，以便您可以单击图像(具有类 .swatch-icon)，并且具有类 .check 的 div 将替换.off 类与 .on 类(.off 具有非事件复选框的图像，.on 具有事件复选框的图像)。

我需要做的是确保对于每个 .color-swatches div，只有一个 swatch-icon 被“选择”(换句话说，对于一个 .check div 一次可以有 .on 类)。现在，我可以选择 .color-swatches div 中的任何或所有色板，这不是我想要的。我可以做什么来改变我的 jQuery 来实现这个功能？

这是我现在拥有的 jQuery:

(function($) {

    $(document).ready(function() {
      $('.color-swatches').each(function() {

         $('.swatch').each(function(i, n) {

            $(n).find('.swatch-icon').bind('click', function(e) {
                e.preventDefault();

                var currentCheck = $(this).find('.check');

                if(currentCheck.hasClass('off')){
                  currentCheck.removeClass('off');
                  currentCheck.addClass('on');
                }

            }.bind($(this)));

         });

    });

  });
}(jQuery));

Answer 1

您可以通过将类添加到单击的元素并将其从所有其他 .check 元素中删除来极大地简化代码。试试这个:

(function($) {
    $(document).ready(function() {
        $('.swatch-icon').click(function() {
            var $container = $(this).closest('.color-swatches');
            $container.find('.check').removeClass('on');
            $(this).siblings('.check').addClass('on');
        });
    });
}(jQuery));

Example fiddle