如何使用动态创建的多个拨动开关？

Question

我是前端的初学者。我正在 HTML、CSS 和 Vanilla Javascript.

中实现切换开关

结构：

我根据我的 Django 数据库中的数据创建了一个包含“n”行的 HTML。每行都有一些数据，如名称、ID、状态。状态列的每一行都有切换开关。我已经实现了一个拨动开关，它适用于一个单一的拨动开关。

问题：

当有多行时，因此有多个拨动开关，只有第一个拨动开关被拨动而不是其他的。当我点击其他切换开关时，第一个也会被触发。我希望所有拨动开关都单独工作并在我的香草 javascript.

中检测到它

我所知道的:

我知道每个切换开关都需要唯一的 ID，但是当我不知道我将拥有多少行以及如何在 JS 代码中检测所有行时，我不知道该怎么做。

代码:

var myswitch = document.querySelectorAll(".idm-switch_div .toggle");
myswitch.forEach((element) => {
  element.addEventListener("click", function () {
    var isChecked = document.querySelector(".toggle-checkbox").checked;
    localStorage.setItem("checkstate", !isChecked);
    console.log(!isChecked);
  });
});

.toggle {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 15.32px;
  width: 30.33px;
  border: 1px solid #b8cfd9;
  border-radius: 17.5px;
  background-color: #ffffff;
}
/* After slide changes */
.toggle:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: all 0.5s;
  height: 11.62px;
  width: 11.96px;
  background-color: #8566c1;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle::after {
  left: 59%;
  background-color: white;
}

/* Checkbox cheked toggle label bg color */
.toggle-checkbox:checked + .toggle {
  height: 15.32px;
  width: 30.33px;
  border-radius: 17.5px;
  background-color: #8566c1;
}

/* Checkbox vanished */
.toggle-checkbox {
  display: none;
}

.toggle-checkbox:checked + .toggle::after {
  left: 59%;
  background-color: white;
}

/* Checkbox cheked toggle label bg color */
.toggle-checkbox:checked + .toggle {
  height: 15.32px;
  width: 30.33px;
  border-radius: 17.5px;
  background-color: #8566c1;
}

/* Checkbox vanished */
.toggle-checkbox {
  display: none;
}

<div class="idm-switch_div div-container">
                <input type="checkbox" id="switch" class="toggle-checkbox" />
                <label for="switch" class="toggle"> </label>
              </div>

<div class="idm-switch_div div-container">
                <input type="checkbox" id="switch" class="toggle-checkbox" />
                <label for="switch" class="toggle"> </label>
              </div>

如有任何帮助，我们将不胜感激。提前谢谢你！

Answer 1

在 html 中，您可以在复选框 ID 和属性标签中使用 {{forloop.counter}}，这样它们就可以拥有自己的唯一 ID
在js中，你可以使用你原来的addEventListener代码，因为你现在有唯一的切换开关id，所以它可以识别你想要切换哪个

代码如下：

<!DOCTYPE html>
{% load static %}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Show User List</title>
    <link rel="stylesheet" href="{% static "css/list.css" %}" />
  </head>

  <body>
    <ul>
      <li>
        <div class="grace-name">
          <img
            src="{% static 'images/arrow-left.svg' %}"
            class="idm-product-icon idm-product-icon-left"
          /><label class="idm-product_name idm-bold">GRACE </label>
          <img
            src="{% static 'images/arrow-left.svg' %}"
            class="idm-product-icon idm-product-icon-right"
          />
        </div>
      </li>
      <li><a class="active" href="#news">USERS</a></li>
      <li><a href="#contact">MACHINES</a></li>
      <li><a href="#about">AUTHORIZED CONNECTIONS</a></li>
    </ul>
    <div class="idm-batch-table-container">
      <table class="idm-data-grid">
        <thead>
          <th></th>
          <th>User ID</th>
          <th>Username</th>
          <th>Full Name</th>
          <th>Enabled</th>
          <th class="idm-status_header">User Connections</th>
          <th>Edit</th>
        </thead>
        <tbody>
          {% for user in users %} {% if not user.is_staff %}
          <tr>
            <td>
              <label class="idm-container-checkbox idm-checkmark-batch-table"
                ><input
                  type="checkbox"
                  class="yeschecked"
                  name="
                        batch-ptions" /><span
                  class="idm-checkmark idm-batch-checkmark"
                ></span
              ></label>
            </td>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.fullname }}</td>
            <td>
              <div class="idm-switch_div div-container">
                <!-- give forloop.counter in input id and label for attribute -->
                <input
                  type="checkbox"
                  id="switch_{{forloop.counter}}"
                  class="toggle-checkbox"
                />
                <label for="switch_{{forloop.counter}}" class="toggle"> </label>
              </div>
            </td>
            <td>
              <button class="table-connect">
                <img src="{% static 'images/Vector.png' %}"
              </button>
            </td>
            <td>
              <button class="table-edit">
                <img src="{% static 'images/edit.png' %}"
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script
      type="text/javascript"
      src="{% static 'javascript/user.js' %}"
    ></script>
  </body>
</html>

Answer 2

您可以使用this单独切换。因为我使用了 parrentElement，所以在每个开关之外使用了额外的 div 元素，以便它在调用时从单独的类中获取值

function toggled(el) {
  var isChecked = el.parentElement.getElementsByClassName("toggle-checkbox")[0];
  if (isChecked.checked == true) {
    isChecked.checked = false;
  } else {
    isChecked.checked = true;
  }
}

.toggle {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 15.32px;
  width: 30.33px;
  border: 1px solid #b8cfd9;
  border-radius: 17.5px;
  background-color: #ffffff;
}


/* After slide changes */

.toggle:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: all 0.5s;
  height: 11.62px;
  width: 11.96px;
  background-color: #8566c1;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.toggle-checkbox:checked+.toggle::after {
  left: 59%;
  background-color: white;
}


/* Checkbox cheked toggle label bg color */

.toggle-checkbox:checked+.toggle {
  height: 15.32px;
  width: 30.33px;
  border-radius: 17.5px;
  background-color: #8566c1;
}


/* Checkbox vanished */

.toggle-checkbox {
  display: none;
}

.toggle-checkbox:checked+.toggle::after {
  left: 59%;
  background-color: white;
}


/* Checkbox cheked toggle label bg color */

.toggle-checkbox:checked+.toggle {
  height: 15.32px;
  width: 30.33px;
  border-radius: 17.5px;
  background-color: #8566c1;
}


/* Checkbox vanished */

.toggle-checkbox {
  display: none;
}

<div>
  <div class="idm-switch_div div-container" onclick="toggled(this)">
    <input type="checkbox" id="switch" class="toggle-checkbox" />
    <label for="switch" class="toggle"> </label>
  </div>
</div>


<div>
  <div class="idm-switch_div div-container" onclick="toggled(this)">
    <input type="checkbox" id="switch" class="toggle-checkbox" />
    <label for="switch" class="toggle"> </label>
  </div>
</div>

如何使用动态创建的多个拨动开关？

How to use multiple toggle switches created dynamically?

javascript

html

css

django

toggleswitch