使用纯 javascript 从数组中删除值

Question

我意识到以前可能有人以不同的方式问过这个问题，但我还没有找到适合这种特定情况的答案，因为它需要用纯 JS 编写（没有 jQuery）。这是一项 class 作业，所以我对此无能为力。

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

这个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

使用纯 javascript 从数组中删除值

Removing a value from array with pure javascript

javascript

arrays

checkbox

for-loop

splice