Javascript 如何更改非'；"；（obj）“；

我在一行中有多个项目，希望根据我的选择轻松更改边框的样式

以下是该行的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>

---

这对于jQuery来说非常简单。我建议您学习jQuery，因为它将使您熟悉css选择器和JavaScript。这是一个样板，让您开始学习，请原谅任何打字错误：

    <style>
        .active{border:5px solid #0000FF;}
    </style>

    $(".item-img").click(function(){
        .each(".item-img"){
            myFunction( $(this).attr("id") );
        }
    });

    function myFunction(theID){
        if( $(this).attr("id") == theID ){
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    }

---

这是一个可以改进的基本演示

其主要思想是遍历所有项并将它们“重置”为默认状态。然后将选择样式应用于选定图元

ul，li{
列表样式：无；
保证金：0；
填充：0；
}
李{
显示：内联块；
保证金：0.1rem；
}
.亮点{
边框：2倍纯红；
}

//获取所有项目。
var items=document.queryselectoral（'.items li'）；
//通过CSS类添加/删除选择样式。
函数addHighlight（）{
//循环浏览所有项目并删除选择类。
对于（变量i=0，len=items.length；i

---

演示。

我不明白你想做什么，所以我无法完整地再现一些东西

不过我可以为你指出正确的方向

你的问题在线上

var changeback = document.getElementById(!obj)

!！obj被解析为布尔值“false”，而不是您选择的元素

此外，当您应该使用“if”时，您正在使用“for” For表示创建循环，“if”表示条件

if(!obj) {
   changeback.style.border = "5px solid blue";
}

而且，边框颜色完全相同

我认为通过将ItemDisc（obj）功能更改为此，可以实现您想要的功能

function ItemDisc(obj){
    element = document.getElementById(obj);
    if(element.classList.contains('active')){
        element.className += " active";
        element.style.border = "5px solid blue";
    } else {
        element.className = "";
        // Careful, because this will remove all classes from your element.
    }
}

只是想说。。。这是没有jQuery的，而且，您可以通过将样式添加到包含边框的css类“active”来简化

---

}

您也可以将其用作您的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';
        });
    }

var-imgs=document.getElementsByClassName（'item-img'）；
对于（i=0；i您有
var changeback=document.getElementById（！obj）；
，您到底想在那里做什么？如果您想在所选项目中添加边框，则更容易选择行中的所有项目，删除所选样式，然后将所选样式应用于所选项目。不，该getElementById（！obj）不起作用。因为要选择的元素不止一个，getElementById意味着要检索一个ID。请查看此线程：非常感谢，这正是我想要的，简单、小且有效。感谢您回来这么快，它帮了我很多忙：）很好，给出的第一个答案是我一直在寻找的，但是这仍然很好，事实上，在另一个文件中帮助了我，所以谢谢：）
function ItemDisc(obj){
    element = document.getElementById(obj);
    if(element.classList.contains('active')){
        element.className += " active";
        element.style.border = "5px solid blue";
    } else {
        element.className = "";
        // Careful, because this will remove all classes from your element.
    }
}

    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';
        });
    }