javascript - 单击将每个 div 元素的 javascript 中的背景颜色重置为透明

Question

单击我的 div 元素时没有将其背景颜色更改为透明，因为它之前已更改

我只有一个 div 元素。在相应的 div 中每次单击时，每个 div 元素的背景颜色都应更改为透明。

我是编写脚本如何实现它的新手

function myfunction()
{
var x = document.getElementById("001");
alert(document.write("x"));
x.addEventListener("click", vanish);
vanish();
function vanish()
{
$(document).ready(function() {
  $("#x").click(function() {
    $("#x").css('background-color', 'none');
    $("#x").css('opacity', '0.0');
  });
});

}

.box {
    background-color: coral;
    width: 30%;
	height:100px;
    display:inline-block;
    border-radius:5px;
	border:1px solid black;
	padding-left:0px;
}
.text {
    padding: 10px 0;
    color:white;
    font-weight:bold;
    text-align:center;
}
#container {
    white-space:nowrap;
    text-align:center;
	margin-left:25%;
	margin-right:25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="box" id="001" onclick="myfunction()">
        <div class="text">text</div>
    </div>
    <div class="box" id="001" name="mybox" onclick="myfunction()">
        <div class="text">Text</div>
    </div>
    <div class="box" id="001" name="mybox" onclick="myfunction()">
        <div class="text" id="003">Text</div>
    </div>
</div>

Answer 1

由于您使用的是 jQuery，因此只需将点击附加到公共(public)类并使用 $(this) 来引用当前点击的元素即可。

注意:id在同一个文档中应该是唯一的，重复的替换。

$(document).ready(function() {
  $(".box").click(function() {
    $(this).css('background-color', 'none');
    $(this).css('opacity', '0.0');
  });
});

.box {
  background-color: coral;
  width: 30%;
  height: 100px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid black;
  padding-left: 0px;
}

.text {
  padding: 10px 0;
  color: white;
  font-weight: bold;
  text-align: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-left: 25%;
  margin-right: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="box" id="001">
    <div class="text">text</div>
  </div>
  <div class="box" id="002" name="mybox">
    <div class="text">Text</div>
  </div>
  <div class="box" id="003" name="mybox">
    <div class="text" id="003">Text</div>
  </div>
</div>