jQuery .selectable()总是返回相同的ID？

Question

下面我有一个小清单：

<ul id="selectable">
    <li id='0'></li>
    <li id='1'></li> 
    <li id='2'></li>
    <li id='3'></li>
    <li id='4'></li>
</ul>
<span>You've selected:</span> 
<span id="select-result">none</span>.

与jQuery相结合，它应该获得所选元素的id：

<script>
    $(function() {
        $( "#selectable" ).selectable({
             stop: function() {
                 var result = $( "#select-result" ).empty();
                 $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable li" ).attr( 'id' );
                     result.append( index );
                 });
             }
        });
    });
</script>

每次我单击一个元素，它都会显示：0

为什么是？当我第二次点击一个列表元素时，它应该显示：1等，我做错了什么？

Answer 1

为什么这么难？为什么不像这样：

$('#selectable li').on('click', function(){
    // set the value of the clicked li to the result div
    $('#select-result').text( $(this).html() );

    // And optional:
    // set all true's to false:
    $('li[data-selected="true"]').attr('data-selected', 'false');
    // Set the clicked item to true
    $(this).attr('data-selected', 'true');
});

可选部分是很随意的，你的问题不需要它:)

Answer 2

我已经修改了MackieeE的解决方案，因为它忽略了选择多个项的能力。使用下面的代码，这是可行的。

也谈Fiddle：http://jsfiddle.net/CVks3/2/

$("#selectable").selectable({
stop: function () {
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function () {
            result.append(this.id);
        });
    }
});

Answer 3

，这可能更容易

$('#selectable li').each(function(i) {
    $(this).on('click', function() {
        $(this).attr('data-selected', 'true').siblings('li[data-selected="true"]').attr('data-selected', 'false');
        $('#select-result').text(i);
    });
});

然后您就根本不需要ids了，并且您可以针对由$('#selectable li[data-selected="true"]')或$('#selectable li').eq($('#select-result').text())选择的

，那么取消选举呢？

我只想指出房间里的大象，然后说这件事从没有选择开始，可能需要回到原点。

类似于：

$('#selectable li').each(function(i) {//get eq
    $(this).on('click', function() {//on click
        if ($(this).attr('data-selected')==='true') {//if currently selected
            $(this).attr('data-selected', 'false');//unselect    
            $('#select-result').text('none');//no results
        } else {//if not currently selected
            $(this).attr('data-selected', 'true')//mark selected
            .siblings('li[data-selected="true"]').attr('data-selected', 'false');//unselect siblings
            $('#select-result').text(i);//change results
        }
    });
});

做小提琴：http://jsfiddle.net/filever10/vm9C2/