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

Question

I have multiple items in a row that I want to easily change the style of the border based on my selection.

Here is the HTML of just the row and some of the items in it:

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

I have tried to do if !(obj).style.... . However that won't work and I cannot find any solutions anywhere.

I Know how to do this with states and cases. However, I didn't want my JS to be a few 100 lines long.

So here is my 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

This is a basic demo that could be improved upon.

The main idea is to loop through all the items and "reset" them to their default state. Then apply the selection style to the selected element.

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

Demo JSFiddle .

Answer 2

I dont understand what you are trying to do, so I can't recreate something in its entirety.

I can point you in the right direction though.

Your problem is on line

var changeback = document.getElementById(!obj)

!obj is being resolved to the Boolean 'false', and not the element you are selecting.

Furthermore, you are using 'for', when you should be using 'if' For is creating loops, and 'if' is for conditions

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

Also, the border color is exactly the same.

I think it is possible to achieve what you want by changing your ItemDisc(obj) function to this.

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.
    }
}

Just wanted to say... This is without jQuery, also, you can make it easier by adding styles to your css class 'active' which included borders.

}

Answer 3

You can also use this as your 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

This is very simple to do with jQuery. I'd recommend learning jQuery because it will familiarize you with both css-selectors and JavaScript. Here's a boilerplate to get you started, please forgive any typos:

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

You will want to load jQuery in your html. Also, you'll need to wrap the js above in:

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