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

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

4

4 回答 4

3

它目前正在收集您的第一个节点，$('#selectable li')因为它收集了许多节点，请将其调整为：

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

Fiddle- 注意，我已将 ID 调整为letter + number W3 规范

<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>
于 2013-11-14T15:20:48.463 回答
3

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

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

可选部分是非常可选的，你的问题不需要它:)

于 2013-11-14T15:21:29.373 回答
2

我修改了 MackieeE 的解决方案，因为它缺少选择多个项目的能力。使用以下代码可以正常工作。

也在小提琴上：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);
    });
});

然后你根本不需要 ids，你可以定位选定的 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 回答