單擊後更改div的樣式，並在單擊另一個div時將其更改回

Question

我在.hta文件中使用trashitem類的div數。在點擊一個特定的div時，我需要將其邊框更改爲3px和紅色。當選擇不同的div時，我需要原始div恢復爲其原始樣式（1px黑色邊框），並且ALSO將此第二個div的邊框更改爲3px紅色。

基本上一次只有一個div可以是紅色的。

純JavaScript比jQuery更受歡迎。我假設我需要將一個類應用於點擊的div，並且如果選擇了另一個div，則將其從此類中移除，同時將此第二個div添加到類或其他類中？

所有的div有類trashitem，但他們各自的onclick引用一個獨特的功能，見下圖：

<div class="trashitem" onclick="Writedata13()"> 
    <div class="photobox"> 
     <img src="http://www.fakeImage.JPG"> 
    </div> 
</div> 

<div class="trashitem" onclick="Writedata14()"> 
    <div class="photobox"> 
     <img src="http://www.fakeImage.JPG"> 
    </div> 
</div> 

<div class="trashitem" onclick="Writedata15()"> 
    <div class="photobox"> 
     <img src="http://www.fakeImage.JPG"> 
    </div> 
</div> 

---

更新的代碼

---

JAVASCRIPT

<script language="javascript"> 
function Writedata14(event) 
{ 
var a = event.target; 
a.style.cssText = 'width:330px;height:10px;background-color:black'; 
} 
</script> 

HTML

<div class="trashitem" onclick="Writedata14()"> 
    <div class="photobox"> 
     <img src="http://www.fakeImage.JPG"> 
    </div> 
</div> 

<div class="trashitem" onclick="Writedata15()"> 
    <div class="photobox"> 
     <img src="http://www.fakeImage.JPG"> 
    </div> 
</div> 

鏈接Codepen demo: http://codepen.io/anon/pen/LVvvME。

Answer 1

避免使用內嵌javascript，這是棄用。

嘗試使用這樣的：

document.addEventListener("DOMContentLoaded", function() { 
 
    var myitem = document.querySelectorAll(".trashitem"); 
 
    for(h=0; h<myitem.length; h++){ 
 
     myitem[h].addEventListener("click",function(e){ 
 
      var myitem = document.querySelectorAll(".trashitem"); 
 

 
      for(h=0; h<myitem.length; h++){ 
 
       myitem[h].classList.remove("bordered"); 
 
      } 
 

 
      this.classList.add("bordered"); 
 

 
     }); 
 
    } 
 
});

.bordered{ 
 
    border: 3px solid red; 
 
} 
 

 
.trashitem{ 
 
    display: inline-block; 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.trashitem img{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

Click the box 
 

 
<div class="trashitem"> 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div> 
 
<div class="trashitem" > 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div> 
 
<div class="trashitem" > 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div>

編輯：

您可以嘗試使用.onclick這樣的：

window.onload = function (event) { 
 

 
    var myitem = document.querySelectorAll(".trashitem"); 
 
    for(h=0; h<myitem.length; h++){ 
 
     myitem[h].onclick = function(e){ 
 
      var myitem = document.querySelectorAll(".trashitem"); 
 

 
      for(h=0; h<myitem.length; h++){ 
 
       myitem[h].classList.remove("bordered"); 
 
      } 
 

 
      this.classList.add("bordered"); 
 

 
     }; 
 
    } 
 
};

.bordered{ 
 
    border: 3px solid red; 
 
} 
 

 
.trashitem{ 
 
    display: inline-block; 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.trashitem img{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

Click the box 
 

 
<div class="trashitem"> 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div> 
 
<div class="trashitem" > 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div> 
 
<div class="trashitem" > 
 
    <div class="photobox"> 
 
     <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1"> 
 
    </div> 
 
</div>

Answer 2

你可以得到被點擊與

event.target; 

的元素，你可能會做這樣的事情

<script type="text/javascript"> 
     function Writedata13(){ 
      var a = event.target; 
      a.style.cssText = 'width:330px;height:10px;background-color:black';   
     } 
</script> 

看到這種以獲得更多關於它的信息 http://www.w3schools.com/jsref/event_target.asp