jQuery .selectable(), всегда возвращает один и тот же идентификатор?

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

В настоящее время он собирает первый узел в вашем $('#selectable li') так как он собирает много узлов, настройте его на:

$('#selectable li.ui-selected');

Скрипка - обратите внимание, я настроил идентификаторы на letter + number W3 Spec

<ul id="selectable">
    <li id='i0'>Zero</li>
    <li id='i1'>One</li>
    <li id='i2'>Two</li>
    <li id='i3'>Three</li>
    <li id='i4'>Four</li>
</ul>
<span>You've selected:</span>  <span id="select-result">none</span>

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

Answer 3

Я модифицировал решение MackieeE, так как в нем отсутствует возможность выбора нескольких предметов. С помощью следующего кода это работает.

Также на скрипке: http://jsfiddle.net/CVks3/2/

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

Answer 4

это может быть проще

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

Тогда вам вообще не нужны идентификаторы, и вы можете выбрать $('#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/