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

下面我有这个小名单：jQuery .selectable（），总是返回相同的ID？

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

来源

2013-11-14 user2972241

无法看到可选择在你的HTML代码 – Miller

你能提供一个链接到的jsfiddle？ – tjons

您正在获取作为整个集合的$（“#selectable li”）的属性。尝试获取$（this）的属性 –

为什么这么难？为什么不喜欢这样的：

$('#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-14 15:21:29 Martijn

+1。简单总是最好的... – tjons

+1但是，您可能会输出this.id或$（this）.index（）'。 – VisioN

我打算使用'this.id'，但后来意识到他可能会将html更改为'option 1'或'blue'。比他想要的价值，而不是想法。 '.index（）' – Martijn

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

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

Fiddle - 注意，我已经调整了ID来letter + numberW3 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>

来源

2013-11-14 15:20:48 MackieeE

不需要调整ID，因为HTML5支持数字ID。 – VisioN

@VisioN这我不知道！ =]谢谢，虽然我认为这不会是我很快就会开始的习惯，尽管 – MackieeE

我已经修改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-14 15:34:27 Roemer

这可能是更容易

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

来源

2013-11-14 15:36:16 FiLeVeR10

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

回答

相关问题