合并为每个id项

时间：2017-10-22 21:51:21

标签： javascript jquery

我对javascript很新，所以我想创建一个简单的清单，其中的按钮可用作复选框。我为按钮设置HTML并使脚本具有检查它们的功能。以下是我的代码。

＆＃13;
＆＃13; 
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("");
  }
});
＆＃13; 
*{
      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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

有没有办法为每个元素合并所有这些函数，其中唯一的id会发生变化？

3 个答案:

答案 0 :(得分：0)

我认为您正在寻找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>

答案 1 :(得分：0)

不确定。

  • 将所有复选框收集到一个集合中。你已经给了它们所有checkbox类，所以这是最简单的方法。
  • 循环遍历集合，并为每个复选框指定对a的引用 常见事件回调函数。
  • 该函数将在复选框的上下文中运行 点击，以便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>

答案 2 :(得分：0)

您也可以在不使用JavaScript的情况下实现相同的行为，只需使用隐藏的复选框，并将:checked伪类选择器与for元素中的<label>属性一起使用。< / p> 

* {
  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>

相关问题
最新问题