jQuery只选择指定数量的元素

Question

jQuery只选择指定数量的元素，如果选择多于指定的元素，则取消选择先前选定的元素。

我有下面的代码来限制选择第四个图像，但我需要能够点击，即使三个被选中，当第4个图像被选中时，第一个图像应该被取消选择。

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实例