单击时，将每个 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，因此只需将单击附加到公共类并使用$(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>

Answer 2

首先id需要唯一，其次不再需要x.addEventListener("click"..内部点击句柄。此外，这里不需要vanish函数，也没有必要使用document.ready并在里面点击

function myfunction(event) {
$(event.target).css('background-color', 'none');
$(event.target).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="" onclick="myfunction(event)">
<div class="text">text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text">Text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text" id="003">Text</div>
</div>
</div>