Question

我在点击时添加和删除列表中的项目时遇到问题。删除功能只能工作一次。

HTML

<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>
   ...

JS

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

...

我觉得这个功能可以简化吗？

Answer 1

编辑：重写了它

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

编辑3：仅从最佳实践角度来看，我使用$为jQuery对象添加前缀，而不是其他任何内容。我觉得它使代码更具可读性，并允许你给变量一个“类型”，所以你总是知道它是什么。

Answer 2

这是你需要的吗？我先跳过转换为数组。另外，代码中的$ 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>

如果已存在，JavaScript会从点击列表中删除字符串

2 个答案: