"（obj）"以外の要素のスタイルを変更する方法

Question

複数の項目が並んでいますが、私の選択に基づいて簡単に境界線のスタイルを変更したいと思います。 !(obj).style....場合、私が何をしようとしている

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

：ここ

だけの行とその中の項目のいくつかのHTMLです。しかし、それはうまくいかず、私はどこでも解決策を見つけることができません。

私は状態とケースでこれを行う方法を知っています。しかし、私は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

：（！OBJ）あなたは `VARの切り戻し=のdocument.getElementByIdを持って

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 2

これはjQueryを使って行うことは非常にシンプルです。私はCSSセレクタとJavaScriptの両方を習得するので、jQueryの学習をお勧めします。ここでは、始めるための定型は、任意のタイプミスを許してくださいです：

<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をロードしたいと思うでしょう。また、上のjsをラップする必要があります：

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

Answer 3

これは改善できる基本的なデモです。

主なアイデアは、すべてのアイテムをループし、を「リセット」のデフォルト状態にすることです。次に、選択した要素に選択スタイルを適用します。

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

あなたがしようとしていることを理解していないので、全体を再作成することはできません。

私は正しい方向にあなたを指摘することができます。

あなたの問題はライン

var changeback = document.getElementById(!obj) 

にある！objが、あなたが選択している要素をブール「偽」に解決し、いないされています。

さらに、あなたが は、ループを作成している「場合は、」あなたが使用する必要があるとき、「の」を使用している、との条件

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クラス「アクティブ」にスタイルを追加することによって、それが簡単に作ることができなくてこれは...言いたかったです。また、あなたのJSとしてこれを使用することができます

}