JavaScriptが既に存在する場合、クリック時にリストから文字列を削除します

-1

クリック時にリストに項目を追加したり削除したりする際に問題があります。削除機能は1回だけ機能します。JavaScriptが既に存在する場合、クリック時にリストから文字列を削除します

<h1 id="show-list></h1> 
<ul id="my-list> 
    <li data-itemname="C1">C1</li> 
    <li data-itemname="B23">B23</li> 
    <li data-itemname="D52">D54</li> 
    ...

$('#my-list').each(function() { 

var $widget = $(this), 
    $itemname = $(this).attr('data-itemname'), 
    ... 

$widget.on('click', function() { 

    $currentlist = document.getElementById('show-list').innerHTML; 
    // create current list array 
    var str = $currentlist; // C1, B23, D54, etc 
    var array = str.split(','); 
    // convert item number to string 
    var itemtocheck = $itemname.toString(); // works OK 
    // check if value in array 
    var result = $.inArray(itemtocheck, array); // so far so good 

    if (result == 0) { 
    selecteditems = $currentlist.replace(itemtoremove+',', ''); 
    $('#show-list').html(selecteditems); // Works only once 
    return false; 
    } else { 
    $('#show-list').append($itemname+','); // will add OK 
    return false; 
    } 
}); 

...

HTMLはまた、私はこの機能を簡素化することができると感じ？

出典

2016-03-31 WayBehind

各アイテムリストにIDを設定する必要があります。 – Farshid

$（ "item id"）。remove; – Farshid

問題を再現可能にする完全な例を示してください。 '$ itemname'はどこから来たのか、どこから来たのかは全く分かりません。「mcve」とお読みください。 – CBroe

EDIT：書き直しはそれ

var $showList = $('#show-list'); 
$('#my-list').find('li').click(function() { 
    var $this = $(this); 
    var itemName = $this.data('itemname'); 

    var showListText = $showList.text(); 
    var showListItems = showListText.split(','); 
    var itemIndex = showListItems.indexOf(itemName); 

    if (itemIndex > -1) { 
     // remove item 
     showListItems.splice(itemIndex, 1); 
    } else { 
     // append item 
     showListItems.push(itemName); 
    } 

    showListText = showListItems.filter(function (a) { return !!a; }).join(','); 
    $showList.text(showListText); 
});

jsfiddle

EDIT 3：だけのベストプラクティスからは、私はjQueryの$何もないとオブジェクト接頭辞ポイントを立ちます。コードをもっと読みやすくし、変数に "型"を与えて何が何であるかを常に知ることができるように感じます。

出典

2016-03-31 19:00:38 Brian

ありがとうございます。ゆっくりしてください。これのほとんどは、どのアイテムが選択されたかを視覚的に表示します。 – WayBehind

@WayBehindは私の答えを更新しました – Brian

優秀！助けてくれてありがとう！とても有難い！ – WayBehind

これはあなたが必要としているものですか？私は最初に配列に変換するのをスキップします。また、コード内の$ itemnameは何ですか？

<html> 
    <head> 
     <script> 
      function removeItemFromList(listName, itemName) { 
       var selectobject=document.getElementById(listName); 
       for (var i=0; i<selectobject.length; i++){ 
        if (selectobject.options[i].value == itemName) { 
         selectobject.remove(i); 
        } 
       } 
      } 

      function addItemToList(listName, itemName, itemValue) { 
       var selectobject=document.getElementById(listName); 
       var found = false; 
       for (var i=0; i<selectobject.length; i++){ 
        if (selectobject.options[i].value == itemValue) { 
         found = true; 
         // already in list, don't re-add 
         break; 
        } 
       } 

       if (!found) { 
        var option = document.createElement("option"); 
        option.text = itemName; 
        option.value = itemValue; 
        selectobject.add(option); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <select id="show-list"> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="mercedes">Mercedes</option> 
      <option value="audi">Audi</option> 
     </select> 
     <br/> 
     <input type="button" value="remove volvo" onclick="removeItemFromList('show-list', 'volvo');" /> 
     <input type="button" value="remove saab" onclick="removeItemFromList('show-list', 'saab');" /> 
     <input type="button" value="add delorean" onclick="addItemToList('show-list', 'DeLorean', 'delorean');" /> 
    </body> 
</html>

出典

2016-03-31 19:06:53 user3667591

元の投稿を更新しました。アイテム名はこの '

' – WayBehind

JavaScriptが既に存在する場合、クリック時にリストから文字列を削除します

答えて

関連する問題