單擊框並更改框顏色

Question

[我想要的答案]

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.

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

[在此處輸入圖片描述][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

Answer 1

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>

單擊框並更改框顏色

問題描述

1 個解決方案

解決方案1
1 已采納 2022-09-14 09:46:40

單擊框並更改框顏色

問題描述

1 個解決方案

解決方案1 1 已采納 2022-09-14 09:46:40

解決方案1
1 已采納 2022-09-14 09:46:40