Düz javascript ile diziden bir değer kaldırılıyor

Question

Bunun daha önce farklı şekillerde sorulmuş olabileceğini anlıyorum, ancak bu özel durum için uygun bir yanıt bulmam gerekiyor çünkü düz JS'de yazılması gerekiyor (jQuery yok). Bu bir sınıf ödevidir, bu konuda yapabileceğim hiçbir şey yok.

Temelde, tıklatıldığında ilişkili değerleri bir diziye gönderdiğinde, kutunun işaretini kaldırmak için tekrar tıklandığında söz konusu değeri kaldırması gereken onay kutularının bir listesini yapması istendi.

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

ve ben var tekabül javascript şimdiye kadar bu biçim temelde başka atama, benim ders kitabı olarak kullanılan ne aynıdır

// 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); 
} 

olan Orada çalışıyor, ama bir sebepten dolayı bu projeye gerçekten çok eğlenceli sonuçlar veriyor.

Birincisi, diziye bir sorun eklenmeyecek, ancak bazen aynı değere sahip birden çok kopyayı işaretledikten, işaretlemeden sonra işaretledikten sonra tekrar kontrol edecek, bu da iyi değil.

Kutuların işaretini kaldırırken kaldırmaya gelince, bazen çalışır, bazen olmaz. Bazen, geçerli onay kutusuyla işaretlenmemiş olandan tamamen farklı bir değeri kaldırır.

Bu for döngüsünde bir yerde olmanın problem olduğuna inanıyorum ve özellikle de içinde if ifadesiyle ilgili bir sorun olabilir. Ama bir ton tinkering'ten sonra, sorunu nasıl düzeltebileceğimi anladım (aynı zamanda hatanın başka bir yerde olması da tamamen yanlış olabilir).

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; 

    } 
} 

Herhangi bir yardım gerçekten takdir edilmektedir. İşte bir jsfiddle.

Answer 1

Bunu daha da karmaşık hale getirdiniz, yapmanız gereken tek şey kutunun işaretli olup olmadığını kontrol etmek ve değer zaten dizide değil, diziye itmek, aksi takdirde dizine bağlı olarak kaldırmaktır.

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

Sen değer dizide ise size ilk kontrolü eklerken yüzden diziden değerleri ekleme ve kaldırma için ayrı işlevi oluşturmayı düşünebilirsiniz ve bu ise, katmayan