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

Question

我在.hta文件中有很多div，其中包含類trashitem郵件。 單擊特定的div后，我需要將其邊框更改為3px和紅色。 當選擇了不同的div，我需要原始格恢復到其原有的風格（1px的黑色邊框），改變本次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演示：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