如何更改不是「（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長達幾百行。

因此，這裏是我的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

您也可以使用這個作爲你的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 2

這是與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。此外，您需要將上面的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類「活動」，其中包括邊界更容易。

}