使用純 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;
}

小提琴