0

我是前端的初学者。我正在用 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>

任何帮助将不胜感激。先感谢您！。

4

2 回答 2

1

您可以使用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>

于 2021-08-23T16:08:52.960 回答
1

  1. 在 html 中，您可以在您的复选框 id 和标签中使用 {{forloop.counter}} 属性，因此它们可以拥有其唯一的 id

  2. 在 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>
于 2021-08-23T16:07:03.860 回答