使用纯 JavaScript 从数组中删除值

Question

我意识到这可能以前以不同的方式被问过，但我还没有找到适合这种特殊情况的答案，因为它需要用纯 JS（非 jQuery）编写。这是课堂作业，所以我无能为力。

基本上，我被要求制作一个复选框列表，单击这些复选框将其关联值发送到一个数组，然后再次单击以取消选中该框时，它应该删除所述值。

这个html是

            <div>
              <fieldset class="checks">
                <legend><span>What are your favorite JavaScript libraries/frameworks?</span></legend>
                <input type="checkbox" id="jq" value="jQuery" name="libraries" />
                <label for="jq" id="jqLabel">jQuery</label>
                <input type="checkbox" id="angular" value="AngularJS" name="libraries" />
                <label for="angular" id="angularLabel">AngularJS</label>
                <input type="checkbox" id="node" value="NodeJS" name="libraries" />
                <label for="node" id="nodeLabel">NodeJS</label>
                <input type="checkbox" id="react" value="ReactJS" name="libraries" />
                <label for="react" id="reactLabel">ReactJS</label>
                <input type="checkbox" id="backbone" value="Backbone" name="libraries" />
                <label for="backbone" id="backboneLabel">Backbone</label>
            </fieldset>
            </div>

            <p id="testPara"></p>

而我到目前为止对应的javascript是

// Function for JS library selections
var libraryArray = [];

function libraryQuery(event) {

   if (event === undefined) { // get caller element in IE8
      event = window.event;
   }

   var callerElement = event.target || event.srcElement;
   var libraryName = callerElement.value;
   if (callerElement.checked) {
     libraryArray.push(libraryName);
     document.getElementById("testPara").innerHTML = libraryArray;
   }
   else {
     var listItems = document.querySelectorAll(".checks input");

     for (var i = 0; i < libraryArray.length; i++) {
        if (listItems[i].value === libraryName) {
         // remove element at index i from array
           libraryArray.splice(i, 1);
           document.getElementById("testPara").innerHTML = libraryArray;

        }
     }
   }
}

function createEventListeners() {
  var libraries = document.getElementsByName("libraries");
  if (libraries[0].addEventListener) {
     for (var i = 0; i < libraries.length; i++) {
        libraries[i].addEventListener("change", libraryQuery, false);
     }
  } else if (libraries[0].attachEvent) {
     for (var i = 0; i < libraries.length; i++) {
        libraries[i].attachEvent("onchange", libraryQuery);
     }
  }

}

if (window.addEventListener) {
   window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
   window.attachEvent("onload", createEventListeners);
}

这种格式与我的教科书中用于另一项作业的格式基本相同，该格式在那里有效，但由于某种原因，它给了我在这个项目上非常时髦的结果。

一方面它会添加到数组中，但有时它会在检查后添加相同值的多个副本，取消选中，然后再次检查，这不好。

至于取消选中复选框时的删除，有时有效，有时无效。有时它会删除与当前未选中的复选框关联的值完全不同的值。

我认为问题出在这个 for 循环的某个地方，更具体地说，它可能是其中的 if 语句有问题。但是经过大量的修补后，我只是不知道如何纠正这个问题（我也可能完全错了，因为错误在其他地方）。

 for (var i = 0; i < libraryArray.length; i++) {
    if (listItems[i].value === libraryName) {
     // remove element at index i from array
       libraryArray.splice(i, 1);
       document.getElementById("testPara").innerHTML = libraryArray;

    }
 }

非常感谢任何帮助。这是jsfiddle。

Answer 1

你已经复杂了，你需要做的就是检查该框是否被选中，并且该值不在数组中，然后将其推送到数组中，否则只需根据索引将其删除即可。

function libraryQuery() {
    var libraryName = this.value,
        index       = libraryArray.indexOf(libraryName);

    if (this.checked &&  index === -1 ) {
        libraryArray.push(libraryName);
    } else {
        libraryArray.splice(index, 1);
    }
    document.getElementById("testPara").innerHTML = libraryArray;
}

FIDDLE