js函数可处理html中的每个项目

如何解决js函数可处理html中的每个项目

这是我的问题：我已经为更大的项目编写了这段代码

document.getElementById("swt").onclick = function() {
    if (this.innerText === "Off") {
        this.innerText = "On";
        document.getElementById("light-status").src="assets/img/lighting_filled.svg";
    } else {
        this.innerText = "Off";
        document.getElementById("light-status").src="assets/img/lighting_outline.svg";
    }

    document.getElementById("light-status").classList.toggle("light-on");
    document.getElementById("card-button").classList.toggle("card-on");
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: dimgray;
    font-family: 'Josefin Sans',sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: minmax(256px,20%) auto;
    grid-template-rows: auto 64px;
    height: 100vh;
}

.main-space-container {
    grid-column: 2;
    grid-row: 1;
    background-color: rgba(0,0.7);
    overflow-x: auto;
    overflow-y: hidden;
}

.floor-container,.system-container {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
}

.card-container {
    margin: 10px;
    padding: 10px;
    max-width: 256px;
    max-height: 256px;
}

.card-title {
    font-size: 24px;
    font-weight: 400;
    padding-left: 5px;
    margin-top: 4px;
    margin-bottom: 2px;
    color: rgba(255,255,0.87);
}

.button-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
}

.card-button {
    margin: 5px;
    height: 96px;
    width: 96px;
    background-color: rgba(50,50,0.7);
    border-radius: 8px;
    transition: linear 0.2s;
    cursor: pointer;
}

.card-on {
    background-color: rgba(255,0.7);
    transition: linear 0.2s;
}

/* .card-button:hover {
    background-color: rgba(255,0.7);
    transition: linear 0.2s;
} */

.feed-container {
    padding-top: 20px;
}

.feed-text  {
    padding-top: 10px;
    padding-bottom: 10px;
    color: rgba(255,0.87);
}

/* alternative classes */

.large {
    height: 202px;
    width: 202px;
    border-radius: 8px;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.four-tile {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.card-icon {
    grid-column: 1;
    grid-row: 1;
    filter: opacity(0.7);
    width: 75%;
    margin: auto;
}

.percentage {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,0.7);
}

.name {
    grid-column: 1 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,0.7);
}

.card-on > .name,.card-on > .percentage {
    color: rgba(0,0.87);
    transition: linear 0.2s;
}

.card-on > .card-icon {
    filter: invert(87%);
    transition: linear 0.2s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Project 0</title>
    <link rel="stylesheet" href="assets/css/floor.css">
</head>
<body>

    <div class="grid-container">

        <!-- Start main -->
            <div class="system-container">
                <div class="card-container">
                    <h3 class="card-title">Lights</h3>
                    <div class="button-container">
                        <div class="card-button four-tile" id="card-button">
                            <img class="card-icon" id="light-status" src="assets/img/lighting_outline.svg">
                            <div class="percentage" id="swt">Off</div>
                            <div class="name">GF</div>
                        </div>
                        <div class="card-button four-tile" id="card-button">
                            <img class="card-icon" id="light-status" src="assets/img/lighting_outline.svg">
                            <div class="percentage" id="swt">Off</div>
                            <div class="name">FF</div>
                        </div>
                        <div class="card-button"></div>
                        <div class="card-button four-tile">
                            <img class="card-icon" id="sched-off" src="assets/img/clock_modern_outline.svg">
                            <div class="name">Scheduler</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End main -->

    </div>

    <!-- start script section -->

    <script src="assets/vendor/main-card.js"></script>
    
    <!-- end script section -->

</body>
</html>

和JS函数有效，但仅适用于使用指定ID找到的第一个元素。我知道这是使用getElementById的预期行为，但是我进行了一些搜索，但找不到一种使该功能与作为ID的每个元素一起使用的方法。有人可以帮忙吗？

更新：我已经按照这种方式对代码进行了调整，按照建议的方式添加了一个类（称为swt）而不是ID，并在div内添加了data-status =“ true”（或false）。但它抛出一个错误，提示未定义btn[i]并且getAttribute无法使用它，但是btn[i].nodeName给我“ DIV”作为反馈，因此它不是未定义的（或者我理解错了吗？）

var btn = document.querySelectorAll(".swt");

for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click",function() {
        const state = btn[i].getAttribute("data-status")
        if (state === "true") {
            btn.innerText = "On";
        } else if (state === "false") {
            btn.innerText = "Off";
        } else {
            btn.innerText = "Not Connected";
        }

        btn.parentNode.querySelector("img.light-status").classList.toggle("light-on");
        btn.parentNode.classList.toggle("card-on");
    })
}

解决方法

尝试

 <div class="card-button four-tile" id="card-button">
  <img class="card-icon" class="light-status" src="assets/img/lighting_outline.svg">
  <div class="percentage" class="swt">Off</div>
  <div class="name">GF</div>
</div>

还有JS

document.querySelectorAll(".card-button .swt").map(btn => {
  btn.onclick = function() {
      const state = btn.getAttribute("data-state")
      if (state === "true") {
          btn.innerText = "On";
          btn.setAttribute("data-state","false")
          btn.parentNode.querySelector("img.light-status").src="assets/img/lighting_filled.svg";
      } else {
          btn.innerText = "Off";
          btn.setAttribute("data-state","true")
          btn.parentNode.querySelector("img.light-status").src="assets/img/lighting_outline.svg";
      }
  
      btn.parentNode.querySelector("img.light-status").classList.toggle("light-on");
      btn.parentNode.classList.toggle("card-on");
  }
}

好吧，按照@Tomalak的提示并使用jQuery进行了解决，因为我对JS毫无用处。这是我的解决方案：

jQuery

$(".swt").click(function() {
var status = $(this).attr("data-status");
if (status === "true") {
    $(this).html("Off");
    $(this).attr("data-status","false");
    $(this).prev().attr("src","assets/img/lighting_outline.svg");
    $(this).parent().toggleClass("card-on");
} else if (status === "false") {
    $(this).html("On");
    $(this).attr("data-status","true");
    $(this).prev().attr("src","assets/img/lighting_filled.svg");
    $(this).parent().toggleClass("card-on");
} else {
    $(this).html("None")
}
console.log(status)
})

HTML

<div class="card-button four-tile">
    <img class="card-icon light-status" src="assets/img/lighting_outline.svg">
    <div class="percentage swt" data-status="false">Off</div>
    <div class="name">GF</div>
</div>

也许不是很优雅，但目前可以使用。仍然很想看看是否有人是解决这个问题的优秀JS，因为为什么不这样做，我很乐意学习一些新知识。

js函数可处理html中的每个项目

如何解决js函数可处理html中的每个项目

解决方法

相关推荐