click the box and change box color-CodePudding

[the answer that i want ]

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.

I don't know where this problem is wrong at the moment. If you click on one of the three boxes, add an on class so that the box turns yellow. Remove the on class so that the original yellow box becomes gray when you click the other box with only one box yellow.

[enter image description here][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 ></i>
    <i ></i>
    <i ></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 ></i>
        <i ></i>
        <i ></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

CodePudding user response：

jQuery solution

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 ></i>
<i ></i>
<i ></i>

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

Plain javascript solution

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 ></i>
<i ></i>
<i ></i>