jQuery .selectable(）， Always 返回相同的 ID

jQuery .selectable(), Always returns the same ID?

本文关键字：ID 返回 Always selectable jQuery      更新时间：2023-09-26

下面我有这个小列表：

<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等，我做错了什么？

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

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

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

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

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

小提琴 - 注意，我已将 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>

我已经修改了MackieeE的解决方案，因为它错过了选择多个项目的能力。使用以下代码，这有效。

同样在小提琴上：http://jsfiddle.net/CVks3/2/

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

这可能更容易 

$('#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/

相关文章：