用一個onclick和querySelectorAll()改變兩個div的屬性

我有多個元素在兩個 div 中是分開的。第一個 div 包含文本，第二個 div 包含顏色。當我點擊一個元素時，文本和顏色應該改變，如果我再次點擊它，它應該變回來。問題是無論我點擊哪一個，它總是最后一個改變的。

HTML 部分：

<style>
    .colorGreen {
        background-color: green;
    }

    .colorRed {
        background-color: red;
    }
</style>

<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>

JavaScript 部分：

<script type='text/javascript'>
    var box1Temp = document.querySelectorAll(".box1");
    var box2Temp = document.querySelectorAll(".box2");
    for (var i = 0; i < box1Temp.length; i  ) {
        var box1 = box1Temp[i];
        var box2 = box2Temp[i];
        box2.onclick = box1.onclick = function() {
            if (box1.classList.contains("colorGreen")) {
                box1.classList.add("colorRed");
                box1.classList.remove("colorGreen");
                box2.innerHTML = "Text2";
            } else {
                box1.classList.add("colorGreen");
                box1.classList.remove("colorRed");
                box2.innerHTML = "Text1";
            }
        }
    }
</script>

它有效，當我只使用一個 div 時。然后我可以使用“this”而不是“box1”變數來添加正確的元素。但是，如果我將“box1”替換為“this”，它仍然是更改的文本 div。（我知道這很明顯正在發生，但我迷路了）

uj5u.com熱心網友回復：

你的代碼很混亂

你是正確的this選擇。

您可以使用簡單的 onclick 功能：

function change(el){
  box1 = el.querySelector('.box1');
  box2 = el.querySelector('.box2');
  if (box1.classList.contains("colorGreen")) {
      box1.classList.add("colorRed");
      box1.classList.remove("colorGreen");
      box2.innerHTML = "Text2";
    } else {
      box1.classList.add("colorGreen");
      box1.classList.remove("colorRed");
      box2.innerHTML = "Text1";
    }
}

<style>
    .colorGreen {
        background-color: green;
    }

    .colorRed {
        background-color: red;
    }
</style>

<div onclick="change(this)">
  <div class="box2">Text1</div>
  <div class="box1 colorGreen">O</div>
</div>

<div onclick="change(this)">
  <div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
  </div>
<div onclick="change(this)">
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
  </div>

uj5u.com熱心網友回復：

通過一些小的調整，這可以寫得更干凈：

// Capture click event for parent container, .toggle-set
for (const ele of document.querySelectorAll(".toggle-set")) {
    ele.addEventListener("click", function() {
    // Grab text and color elements
    const textToggle = ele.querySelector(".toggle-text");    
    const colorToggle = ele.querySelector(".toggle-color");
    
    // Toggle text
    // NOTE: This could use further refinement with regex or something similar to strip whitespace before comparison
    textToggle.textContent = textToggle.textContent == "Text1" ? "Text2" : "Text1";
    
    // Toggle css classes
    colorToggle.classList.toggle("colorGreen");
    colorToggle.classList.toggle("colorRed");
  });
}

.colorGreen { background-color: green; }
.colorRed { background-color: red; }

<div class="toggle-set">
  <div class="toggle-text">Text1</div>
  <div class="toggle-color colorGreen">
    O
  </div>
</div>

<div class="toggle-set">
  <div class="toggle-text">Text1</div>
  <div class="toggle-color colorGreen">
    O
  </div>
</div>

uj5u.com熱心網友回復：

我認為以下代碼片段可以幫助您獲得所需的結果

let box1  = document.querySelectorAll(".box1");
let box2  = document.querySelectorAll(".box2");

box1.forEach((b1,i) => {
  b1.addEventListener("click",(ev) => {
    ev.target.classList.toggle("colorGreen");
    ev.target.classList.toggle("colorRed");
    console.log(box2[i]);
    if(ev.target.classList.contains("colorGreen")){
      box2[i].textContent = "Text1";
    }else{
      box2[i].textContent = "Text2"
    }
  })
})

標籤：javascript网页格式点击jquery-选择器

上一篇：我回傳`boolean`但Array.prototype.filter()期望在箭頭函式的末尾回傳一個值

下一篇：如何在Javascript中轉換嵌套的物件陣列