入力フィールドでテキストをカスタマイズする

Question

チェックボックスをクリックして重複を修正する方法を知っている人はいますか？

<label><input type="checkbox" data-bValue="100" data-sValue="sV1" data-nValue="nV1" name="layers"> 100</label><label><input type="checkbox" data-bValue="200" data-sValue="sV2" data-nValue="nV2" name="layers"> 200</label><label><input type="checkbox" data-bValue="300" data-sValue="sV3" data-nValue="nV3" name="layers"> 300</label><label><input type="checkbox" data-bValue="400" data-sValue="sV4" data-nValue="nV4" name="layers"> 400</label><label><input type="checkbox" data-bValue="500" data-sValue="sV5" data-nValue="nV5" name="layers"> 500</label><label><input type="checkbox" data-bValue="600" data-sValue="sV6" data-nValue="nV6" name="layers"> 600</label><label><input type="checkbox" data-bValue="700" data-sValue="sV7" data-nValue="nV7" name="layers"> 700</label><h1 id="render"></h1> 

私の検索では、私はそれをすべてを再実行する必要があります信じていますが、私は私が最初にここに尋ねると思いました。

フィドル：https://jsfiddle.net/swedoc/Lwr16wrt/

$(document).ready(function() { 

    var scents = []; 
    var notes = []; 
    var theRender = document.getElementById("render"); 

    $("input[name='layers']").on('click', function(){ 

       $.each($("input[name='layers']:checked"), function(){    
        scents.push($(this).attr("data-sValue")); 
       });   

       $.each($("input[name='layers']:checked"), function(){    
        notes.push($(this).attr("data-nValue")); 
       }); 

        theRender.innerHTML 
        += "You’ve created a<br>" 
        + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
        + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";       
    }); 
}); 

Answer 1

答えは、すべての変数のスコープについてです。関数内に配列を宣言する必要があります。

innerHTML +=の「+」も削除してください。ここで

$("input[name='layers']").on('click', function(){ 
    var scents = []; 
    var notes = []; 

    $.each($("input[name='layers']:checked"), function(){    
     scents.push($(this).attr("data-sValue")); 
    });   

    $.each($("input[name='layers']:checked"), function(){    
     notes.push($(this).attr("data-nValue")); 
    }); 

    theRender.innerHTML = "You’ve created a<br>" 
     + scents.join(', ').replace(/,(?!.*,)/gmi, ' and') + " sValue with " 
     + notes.join(', ').replace(/,(?!.*,)/gmi, ' and') + " nValue.";       
}); 

は、あなたのfiddleJsが修正される：https://jsfiddle.net/Lwr16wrt/23/