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

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

主要思想是遍历所有项目，然后＆＃34;重置＆＃34; 将它们设置为默认状态。然后将选择样式应用于所选元素。

<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

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

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

你的问题在线

HashMap

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

此外，当你使用'if'时，你正在使用'for' 用于创建循环，'if'用于条件

var changeback = document.getElementById(!obj)

此外，边框颜色完全相同。

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

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

只是想说...这是没有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*/});

如何更改不是“（obj）”元素的样式

4 个答案: