單擊框并更改框顏色-有解無憂

[我想要的答案]

this is a problem that causes the color to change when you press the box. A valid example will be provided by clicking on the hyperlink.

暫時不知道這個問題出在哪里。如果單擊三個框之一，添加一個 on 類，使框變為黃色。去掉on類，讓原來的黃色框在你點擊另一個框的時候變成灰色，只有一個框是黃色的。

[在此處輸入圖片描述][2]

const box = document.getElementsByClassName('.favorites_icon')


function onAndOff(event) {
    for(let i = 0; i < box.length; i  ){
        box[i].classList.remove('on');
    
        event.target.classList.add('on');
    }
}

for(let i=0; i < box.length; i  ){
    box[i].addEventListener('click', onAndOff)
}

.favorites_icon {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
}

.on {
  background-color: yellow;
}

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>box</title>

    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <i class="favorites_icon"></i>
    <i class="favorites_icon"></i>
    <i class="favorites_icon"></i>

    <script src="jquery-3.5.1.js"></script>
    <script src="index.js"></script>
  </body>
</html>

function onAndOff(event) {
    for(let i = 0; i < box.length; i  ){
        box[i].classList.remove('on');
    
        event.target.classList.add('on');
    }
}

for(let i=0; i < box.length; i  ){
    box[i].addEventListener('click', onAndOff)
}



<!-- language: lang-css -->

    .favorites_icon {
      display: block;
      width: 50px;
      height: 50px;
      background-color: #ccc;
      margin-bottom: 10px;
    }

    .on {
      background-color: yellow;
    }


<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8" />
        <title>box</title>

        <link rel="stylesheet" href="index.css" />
      </head>
      <body>
        <i class="favorites_icon"></i>
        <i class="favorites_icon"></i>
        <i class="favorites_icon"></i>

        <script src="jquery-3.5.1.js"></script>
        <script src="index.js"></script>
      </body>
    </html>


<!-- end snippet -->


  [1]: https://i.stack.imgur.com/TjfNS.gif
  [2]: https://i.stack.imgur.com/GDq4B.gif

uj5u.com熱心網友回復：

jQuery解決方案

const boxes = document.querySelectorAll(".favorites_icon");

boxes.forEach(box => {
    box.addEventListener('click', ()=> {
        $(box).addClass('on');
        $(box).siblings().removeClass('on');
    });
});

.favorites_icon {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
}

.on {
  background-color: yellow;
}

<i class="favorites_icon"></i>
<i class="favorites_icon"></i>
<i class="favorites_icon"></i>

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>

普通的javascript解決方案

const boxes = document.querySelectorAll(".favorites_icon");

boxes.forEach(box => {
    box.addEventListener('click', ()=> {
        let siblings = getSiblings(box);
        // add yellow to clicked box
        box.classList.add('on');
        // remove yellow from siblings
        siblings.forEach(el => {
            el.classList.remove('on');
        })
    });
});


function getSiblings(e) {
    let siblings = []; 
    if(!e.parentNode) {
        return siblings;
    }

    let sibling  = e.parentNode.firstChild;
    
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
    }
    return siblings;
};

.favorites_icon {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
}

.on {
  background-color: yellow;
}

<i class="favorites_icon"></i>
<i class="favorites_icon"></i>
<i class="favorites_icon"></i>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507643.html

標籤：javascript

上一篇：如何允許在TextField中只輸入一個句子（單詞或字符）？斯威夫特5

下一篇：從父級觸發Angular表單的提交事件