Question

我试图找出一种简单的方法让我能够使用JQuery选择2个DIV元素 - 这是我的尝试：http://jsfiddle.net/MarKP/5/

我需要将选择限制为2，并使用我添加的类来获取所选对象。

任何人都可以指出我更好的方向

<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>

var selected = 0;
var prevSelect;
$('div').click(function() {
    if (selected == 2) {
        selected = 1;
        console.log(prevSelect);
        $('#' + prevSelect).removeClass('fill');
    }
    $(this).addClass('fill');
    prevSelect = $(this).attr('id');
    selected = selected +1;

});

div {
    border: 1px solid blue;
    height: 25px;
    margin-bottom: 5px;
}
.fill {
    background-color: red;
}

Answer 1

如果已经选择了2个div，我更新了您的功能以禁止任何选择更改，除非您单击所选的div以取消选择它：

http://jsfiddle.net/MarKP/32/

$('div').click(function(e){
    var $et = $(e.target);
    if ($et.hasClass('fill')) { 
        $et.removeClass('fill');
    } else {
        if ($('.fill').length < 2) {
            $et.addClass('fill');
        }
    }
});

旧解决方案：http://jsfiddle.net/MarKP/11/

Answer 2

你想要的是这样的：

$('.divclass').click(function(){
  var cnt=$('.divclass .selected').length;
  if(cnt>2) return;

  $(this).addClass('selected');
});

这会将类selected添加到最多2个divclass个对象。要获取所选对象，只需拨打$('.divclass .selected')。

即可

Answer 3

如果你总是想要删除最老的一个（除非它已被选中），我会像这样维护我自己的数组：

示例： http://jsfiddle.net/MarKP/17/

var selected = [];
$('div').click(function() {
    if( $.inArray( this, selected ) > -1 ) return;
    if( selected.length === 2 ) {
        $(selected.shift()).removeClass('fill');
    }
    selected.push($(this).addClass('fill')[0]);
});

Answer 4

如果从div.selected的选择器返回的div少于两个，则只添加一个选定的类。否则，删除所选的类。例如：

$('div').click(function() {
    if (!$(this).hasClass("selected") && $("div.selected").length < 2) {
        $(this).addClass("selected");
    } else {
        $(this).removeClass("selected");
    }
});

选择2个DIV元素

4 个答案: