单击时更改 div 的样式，单击另一个 div 时更改回样式

Question

我在 .hta 文件中有许多 div 和 class trashitem。单击特定的 div 后，我需要将其边框更改为 3px 和红色。 When a different div is selected, I need the original div to revert back to its original style (1px black border) and ALSO change this second div的边框为3px红色。

基本上一次只能div一个红色

纯 JavaScript 优于 jQuery 请。我假设我需要将 class 应用于单击的 div，如果选择另一个 div，则将其从 class 中删除，同时添加第二个 [=46] =] 到 class 什么的？

所有 div 都有 class 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>

Link 到 Codepen demo: http://codepen.io/anon/pen/LVvvME.

Answer 1

您可以获得被点击的元素

 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

Answer 2

避免使用 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>

单击时更改 div 的样式，单击另一个 div 时更改回样式

Changing a div's style when clicked, and changing it back when another div is clicked

html

javascript

css

onclick