0

以下に、この小さなリストを示します。

<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

なぜですか？リスト要素を 2 回目にクリックすると、次のように表示されます1。

4

4 に答える 4

2

複数のアイテムを選択する機能がないため、MackieE のソリューションを修正しました。次のコードでは、これが機能します。

フィドルについても: http://jsfiddle.net/CVks3/2/

$("#selectable").selectable({
stop: function () {
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function () {
            result.append(this.id);
        });
    }
});
于 2013-11-14T15:34:27.157 に答える
1

これは簡単かもしれません

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

次に、IDはまったく必要ありません。選択したby$('#selectable li[data-selected="true"]')またはbyをターゲットにすることができます$('#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/

于 2013-11-14T15:36:16.953 に答える