如何更改不是“（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>

我试过这样做!(obj).style.... 然而，这将无法工作，我无法在任何地方找到任何解决方案。

我知道如何用状态和案例来做到这一点。 但是，我不希望我的JS长达100行。

所以这是我的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

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

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

<div class="items">
  <ul>
    <li>
      <img src="https://placehold.it/50x50&text=01">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=02">
    </li>
    <li>
      <img src="https://placehold.it/50x50&text=03">
    </li>
  </ul>
</div>

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 1rem;
}
.highlight {
  border: 2px solid red;
}

// Get all items.
var items = document.querySelectorAll( '.items li' );

// Adding/removing selection style via a CSS class.
function addHighlight() { 

  // Loop through all items and remove the selection class.
  for ( var i = 0, len = items.length; i < len; i++ ) {
    items[i].className = items[i].className.replace( 'highlight', '' );
  }

  // Add selection class to selected item.
  this.className += ' highlight';

}

// Add click event handler to items.
function addEventListener( items, event, listener ) {
    for ( var i = 0, len = items.length; i < len; i++ ) {
        items[ i ].addEventListener( event, listener );
    }
}

addEventListener( items, 'click', addHighlight ); 

演示JSFiddle 。

Answer 2

我不明白你要做什么，所以我不能完全重建一些东西。

我可以指出你正确的方向。

你的问题在线了

var changeback = document.getElementById(!obj)

！obj被解析为布尔'false'，而不是你选择的元素。

此外，你正在使用'for'，当你应该使用'if'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'（包括边框）来简化它。

}

Answer 3

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

Answer 4

这与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");
        }
    }

您将需要在您的HTML中加载jQuery。 此外，您需要将上面的j包装在：

    $(document).ready(function(){/*above code goes here*/});