idアイテムごとに呼び出されるマージ関数

Question

javascriptの新機能ですので、チェックボックスとして機能するボタン付きの簡単なチェックリストを作成することを考えました。私はボタンのHTMLを設定し、それらをチェックするための関数でスクリプトを作った。以下は私のコードです。

var checkbox1 = $("#checkbox1"); 
 
checkbox1.on("click", function() { 
 
    checkbox1.toggleClass("checked"); 
 
    if (checkbox1.hasClass("checked")) { 
 
    checkbox1.html('<i class="material-icons">check</i>'); 
 
    } else { 
 
    checkbox1.text(""); 
 
    } 
 
}); 
 

 
var checkbox2 = $("#checkbox2"); 
 
checkbox2.on("click", function() { 
 
    checkbox2.toggleClass("checked"); 
 
    if (checkbox2.hasClass("checked")) { 
 
    checkbox2.html('<i class="material-icons">check</i>'); 
 
    } else { 
 
    checkbox2.text(""); 
 
    } 
 
}); 
 

 
var checkbox3 = $("#checkbox3"); 
 
checkbox3.on("click", function() { 
 
    checkbox3.toggleClass("checked"); 
 
    if (checkbox3.hasClass("checked")) { 
 
    checkbox3.html('<i class="material-icons">check</i>'); 
 
    } else { 
 
    checkbox3.text(""); 
 
    } 
 
});

*{ 
 
     margin: 0; 
 
     /*color: #fff;*/ 
 
    } 
 
    
 
    body { 
 
     background-color: #0f0f0f; 
 
    } 
 
    
 
    p { 
 
     line-height: 30px; 
 
     padding-left: 15px; 
 
    } 
 
    
 
    .task { 
 
     background-color: #cbcbcb; 
 
     display: flex; 
 
     border-radius: 30px; 
 
     margin: 15px; 
 
    } 
 
    
 
    .box { 
 
     width: 30px; 
 
     height: 30px; 
 
    } 
 
    
 
    .checkbox { 
 
     border-radius: 50%; 
 
     padding: 0; 
 
     width: 30px; 
 
     height: 30px; 
 
     border: none; 
 
    } 
 
    
 
    .checkbox.checked { 
 
     background-color: #0d88ce; 
 
     color: white; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
    rel="stylesheet"> 
 
<div class="task"> 
 
    <div class="box"> 
 
    <button id="checkbox1" class="checkbox" type="button" name="button"></button> 
 
    </div> 
 
    <p> Some text</p> 
 
</div> 
 
<div class="task"> 
 
    <div class="box"> 
 
    <button id="checkbox2" class="checkbox" type="button" name="button"></button> 
 
    </div> 
 
    <p> Some text</p> 
 
</div> 
 
<div class="task"> 
 
    <div class="box"> 
 
    <button id="checkbox3" class="checkbox" type="button" name="button"></button> 
 
    </div> 
 
    <p> Some text</p> 
 
</div>

それのIDのみが変化し、各要素のためのすべてのこれらの機能をマージする方法はあり ？

Answer 1

classセレクタをお探しの場合は、

var checkboxes = $(".checkbox"); 
 
checkboxes.on("click", function() { 
 
    $(this).toggleClass("checked"); 
 
    if ($(this).hasClass("checked")) { 
 
    $(this).html('<i class="material-icons">check</i>'); 
 
    } else { 
 
    $(this).text(""); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="checkbox1" class="checkbox" type="button" name="button"></button> 
 
<button id="checkbox2" class="checkbox" type="button" name="button"></button> 
 
<button id="checkbox3" class="checkbox" type="button" name="button"></button>

Answer 2

確かに：何で終わるだろうと、このようなものです。

• すべてのチェックボックスを1つのコレクションにまとめます。すでにすべてのクラスにcheckboxクラスを与えているので、これが最も簡単な方法です。
• コレクションをループし、各チェックボックスに 共通イベントコールバック関数への参照を渡します。
• この機能は、 というチェックボックスのコンテキストで実行されるため、thisキーワードは、 のidとは無関係のチェックボックスを参照します。
• thisをJQueryオブジェクトに渡すことで、JQuery APIを使用できます。

// Find all the checkboxes by their class and loop over them: 
 
$(".checkbox").each(function(idx, box){ 
 

 
    // Set up an event handler for each one 
 
    $(box).on("click", function(evt) { 
 
    
 
     // In the callback, this will reference the checkbox that was clicked 
 
     // but we'll wrap it in the JQuery object so we can use it with JQuery 
 
     var $this = $(this); 
 
     
 
     $this.toggleClass("checked"); 
 
     if ($this.hasClass("checked")) { 
 
     $this.html('<i class="material-icons">check</i>'); 
 
     } else { 
 
     $this.text(""); 
 
     } 
 
    }); 
 

 
});

*{ 
 
     margin: 0; 
 
     /*color: #fff;*/ 
 
    } 
 
    
 
    body { 
 
     background-color: #0f0f0f; 
 
    } 
 
    
 
    p { 
 
     line-height: 30px; 
 
     padding-left: 15px; 
 
    } 
 
    
 
    .task { 
 
     background-color: #cbcbcb; 
 
     display: flex; 
 
     border-radius: 30px; 
 
     margin: 15px; 
 
    } 
 
    
 
    .box { 
 
     width: 30px; 
 
     height: 30px; 
 
    } 
 
    
 
    .checkbox { 
 
     border-radius: 50%; 
 
     padding: 0; 
 
     width: 30px; 
 
     height: 30px; 
 
     border: none; 
 
    } 
 
    
 
    .checkbox.checked { 
 
     background-color: #0d88ce; 
 
     color: white; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <meta charset="utf-8"> 
 
     <title>Homework</title> 
 
     <link rel="stylesheet" href="style.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
      rel="stylesheet"> 
 
     </head> 
 
     <body> 
 
      <div class="task"> 
 
      <div class="box"> 
 
       <button id="checkbox1" class="checkbox" type="button" name="button"></button> 
 
      </div> 
 
      <p> Some text</p> 
 
      </div> 
 
      <div class="task"> 
 
      <div class="box"> 
 
       <button id="checkbox2" class="checkbox" type="button" name="button"></button> 
 
      </div> 
 
      <p> Some text</p> 
 
      </div> 
 
      <div class="task"> 
 
      <div class="box"> 
 
       <button id="checkbox3" class="checkbox" type="button" name="button"></button> 
 
      </div> 
 
      <p> Some text</p> 
 
      </div> 
 
    
 
     </body> 
 
     <script type='text/javascript' src='script.js'></script> 
 
    </html>

Answer 3

また、単に隠されたチェックボックスを使用して、一緒に<label>要素からfor属性で:checked擬似クラスセレクタを使用し、JavaScriptを使用しなくても同じ動作を実現することができます。

* { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #0f0f0f; 
 
} 
 

 
p { 
 
    line-height: 30px; 
 
    padding-left: 15px; 
 
} 
 

 
.task { 
 
    background-color: #cbcbcb; 
 
    display: flex; 
 
    border-radius: 30px; 
 
    margin: 15px; 
 
} 
 

 
.custom-checkbox { 
 
    display: block; 
 
    position: relative; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    color: white; 
 
} 
 

 
.custom-checkbox .input { 
 
    display: none; 
 
} 
 

 
.custom-checkbox .label { 
 
    background-color: #ddd; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
.custom-checkbox .icon { 
 
    display: none; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    z-index: 2; 
 
    text-align: center; 
 
    width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.custom-checkbox .input:checked ~ .label { 
 
    background-color: #0d88ce; 
 
} 
 

 
.custom-checkbox .input:checked ~ .icon { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Homework</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="task"> 
 
    <div class="custom-checkbox"> 
 
     <input id="checkbox1" class="input" type="checkbox" /> 
 
     <label for="checkbox1" class="label"></label> 
 
     <i class="icon material-icons">check</i> 
 
    </div> 
 
    <p> Some text</p> 
 
    </div> 
 
    <div class="task"> 
 
    <div class="custom-checkbox"> 
 
     <input id="checkbox2" class="input" type="checkbox" /> 
 
     <label for="checkbox2" class="label"></label> 
 
     <i class="icon material-icons">check</i> 
 
    </div> 
 
    <p> Some text</p> 
 
    </div> 
 
    <div class="task"> 
 
    <div class="custom-checkbox"> 
 
     <input id="checkbox3" class="input" type="checkbox" /> 
 
     <label for="checkbox3" class="label"></label> 
 
     <i class="icon material-icons">check</i> 
 
    </div> 
 
    <p> Some text</p> 
 
    </div> 
 

 
</body> 
 

 
</html>