如何使用动态创建的多个拨动开关?
How to use multiple toggle switches created dynamically?
我是前端的初学者。我正在 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>
如有任何帮助,我们将不胜感激。提前谢谢你!
在 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>
您可以使用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>
我是前端的初学者。我正在 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>
如有任何帮助,我们将不胜感激。提前谢谢你!
在 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>
您可以使用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>