Question

Im trying to figure out a simple way to enable me to select 2 DIV elements using JQuery – here is my attempt : http://jsfiddle.net/MarKP/5/

I need to limit the selections to just 2 and will use the class I add to get the selected objects.

Can anyone point me in a better direction

<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

I updated your functionality to disallow any selection change if 2 divs are already selected unless you click a selected div to unselect it:

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');
        }
    }
});

Old solution: http://jsfiddle.net/MarKP/11/