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

为什么？当我第二次单击list-element时，它应显示：1等，我做错了什么？

Answer 1

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

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

Fiddle - 请注意，我已将ID调整为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 2

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

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

然后根本不需要ID，您可以按$('#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/

jQuery .selectable（），总是返回相同的ID？

4 个答案: