javascript - 如何更改不是 "(obj)"的元素的样式

Question

我有多个连续的元素，我想根据我的选择轻松更改边框的样式。

这里是行和其中一些元素的 HTML:

<div class="items">
              <ul>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3001.png" alt="Abyssal Scepter" id="as">
                  </span>
                </li>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3020.png" alt="Sorcerer's Shoes" id="ss">
                  </span>
                </li>
                <li class="item-hold">
                  <span class="item icon64x64">
                    <img class="item-img icon64x64" src="css/img/3025.png" alt="Iceborn Gauntlet" id="ig">
                  </span>
                </li>
             </ul>
       </div>

我已经尝试做 if !(obj).style....。然而，那是行不通的，我无法在任何地方找到任何解决方案。

我知道如何处理状态和案例。但是，我不希望我的 JS 有几百行那么长。

这是我的js

var as = document.getElementById('as');
var ss = document.getElementById('ss');
var ig = document.getElementById('ig');

as.addEventListener('click', function() {
  ItemDisc('as');
});
ss.addEventListener('click', function() {
  ItemDisc('ss');
});
ig.addEventListener('click', function() {
  ItemDisc('ig');
});

function ItemDisc(obj) {
  var change = document.getElementById(obj);
  var changeback = document.getElementById(!obj);
  change.style.border = "5px solid blue";
  for(!obj) {
    changeback.style.border = "5px solid blue";
  }
}

Answer 1

您也可以将其用作您的 JS:

    var imgs = document.getElementsByClassName('item-img');

    for(i=0; i<imgs.length; i++) {
        imgs[i].addEventListener('click', function(){
            for (i=0; i<imgs.length; i++)
                imgs[i].style.border='1px solid blue';
            this.style.border = '1px solid red';
        });
    }