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？

回答

相關問題