jQuery只选择指定数量的元素

Question

jQuery只选择指定数量的元素，选择多于指定的元素，然后取消选择之前选择的元素。

我有以下代码来限制第四张图像的选择，但即使选择了三张图像我也需要能够点击，当选择第四张图像时，应该取消选择第一张图像。

HTML

<pre>
    <ul class="ul-attribute80" style="margin-top: 10px;">
        <li class="swatchContainer">
            <img id="col-11" src="images/col1.jpg" class="swatch" alt="Skipper" width="30px" height="30px" title="Skipper">
        </li>
        <li class="swatchContainer">
            <img id="col-11" src="images/col1.jpg" class="swatch" alt="Skipper" width="30px" height="30px" title="Skipper">
        </li>
        <li class="swatchContainer">
            <img id="col-11" src="images/col1.jpg" class="swatch" alt="Skipper" width="30px" height="30px" title="Skipper">
        </li>
        <li class="swatchContainer">
            <img id="col-11" src="images/col1.jpg" class="swatch" alt="Skipper" width="30px" height="30px" title="Skipper">
        </li>
    </ul>
</pre>

JS

var counter= 0;
jQuery(".ul-attribute80 li img").click(function() {
    if(counter < 3) {
        if(jQuery(this).hasClass("selected")) {
            jQuery(this).removeClass("selected");
            count--;
        } else {
            jQuery(this).addClass("selected");
            count++;
        }
    }
});

Answer 1

我不使用计数器而是使用数组。只需在单击时将元素添加到数组中，检查它们是否已存在于数组中，或者数组是否超过三个元素。

var selected = [];
jQuery(".ul-attribute80 li img").click(function () {
    $('.swatch').removeClass("selected");
    if ($.inArray($(this).attr('id'), selected) == -1) {
        selected.push($(this).attr('id'));
    } else {
        selected.splice($.inArray($(this).attr('id'), selected), 1);
    }
    if (selected.length > 3) {
        selected.shift();
    }
    $.each(selected, function () {
        $('#' + this).addClass("selected");
    })
});

<强> jsFiddle example