Question

我有4个缩略图显示（随机图像），并希望仅将选择限制为1个项目并使其余缩略图无法选择，除非您单击所选项目以将其释放。为了将每个用户限制为1选择，我正在考虑使用.length＆lt; 1，但不知道如何限制1。

CSS：

.item {
    height: 125px;
    margin: 15px;
    width: 125px;
}

.item:hover {
    background: #f00;
    height: 130px;
    width: 130px;
}

HTML：

<div class="item-container">
    <a class="item" href="/">
        <img src="http://placehold.it/125x125">
    </a>
    <a class="item" href="/">
        <img src="http://placehold.it/125x125">
    </a>
    <a class="item" href="/">
        <img src="http://placehold.it/125x125">
    </a>
    <a class="item" href="/">
        <img src="http://placehold.it/125x125">
    </a>
 </div>

JS：

$('.item').addClass('inactive');

$('.item').on('click', function() {
    if($(this).hasClass('inactive')) {
        $(this).removeClass('inactive').addClass('active');
    } else {
        return false;
    }
});

Answer 1

这是一种方式 -

$('body').on('click', '.item', function(e) {
    e.preventDefault();
    if( !$(this).hasClass('inactive') ) {
        $('.item').toggleClass('inactive');
        $(this).removeClass('inactive');
    }
});

http://jsfiddle.net/j10xfjjm/

Answer 2

var hasActive = false;

$('.item').addClass('inactive');

$('.item').on('click', function() {
    if($(this).hasClass('inactive') && hasActive == false) {
        $(this).removeClass('inactive').addClass('active');
        hasActive = true;
    } else if ($(this).hasClass('active') {
        hasActive = false;
    }
});

我确定这个代码中有一个缺陷我很累但是这个想法设置了一个标志，看看是否有活动图像并在允许另一个活动图像之前检查它。

jQuery限制1个项目选择

2 个答案: