Javascript jQuery不更新变量信息
有两个div的类为Javascript jQuery不更新变量信息,javascript,jquery,Javascript,Jquery,有两个div的类为.egg。用户应该单击要更改其背景颜色的div，然后单击该div的新背景颜色。总共两步。我已经编写了一个jQuery函数来捕获为背景更改选择的div的id，然后为要更改为背景的颜色捕获id。效果很好，除了当选择新的div时，要更改背景颜色，以前选择的divid仍然存储在名为clickedId的变量中 为了解决这个问题，我设置了clickedId=''为所选div更改背景后。但是，当选择新div时，它不再工作。控制台显示无法读取null的属性“style”。它看起来像代码的第一部
.eggidididclickedIdclickedId=''为所选div更改背景后。但是，当选择新div时，它不再工作。控制台显示无法读取null的属性“style”
。它看起来像代码的第一部分，$（“.egg”）。单击（function（）{…
不会对新的div选择执行
有人对此有什么建议吗？提前谢谢
jQuery代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//Select the div to change the background color
$(".egg").click(function() {
var clickedId = $(this).attr("id");
//Updating the background color for selected div
$(".color").click(function() {
var clickedColor = $(this).attr("id");
if(clickedColor == 'red'){
document.getElementById(clickedId).style.backgroundColor = "red";
clickedId = '';
return;
}else if(clickedColor == 'blue'){
document.getElementById(clickedId).style.backgroundColor = "blue";
clickedId = '';
return;
}else if (clickedColor == 'yellow') {
document.getElementById(clickedId).style.backgroundColor = "yellow";
clickedId = '';
return;
}else{
document.getElementById(clickedId).style.backgroundColor = "white";
clickedId = '';
return;
}
});
});
});
</script>
$（文档）.ready（函数（）{
//选择div以更改背景色
$（“.egg”）。单击（函数（）{
var clickedId=$（this.attr（“id”）；
//更新所选div的背景色
$（“.color”）。单击（函数（）{
var clickedColor=$（this.attr（“id”）；
如果（clickedColor==“红色”）{
document.getElementById（单击EDID）.style.backgroundColor=“红色”；
单击EDID=“”；
返回；
}否则，如果（单击颜色=='蓝色'）{
document.getElementById（单击EDID）.style.backgroundColor=“蓝色”；
单击EDID=“”；
返回；
}否则，如果（单击颜色=='黄色'）{
document.getElementById（单击EDID）.style.backgroundColor=“黄色”；
单击EDID=“”；
返回；
}否则{
document.getElementById（单击EDID）.style.backgroundColor=“白色”；
单击EDID=“”；
返回；
}
});
});
});
HTML代码：
<body>
<div id="egg-main">
<div id="left-egg"></div>
<div id="center-egg1" class="egg" onclick="semi_left()"></div>
<div id="center-egg2" class="egg" onclick="semi_right()"></div>
<div id="right-egg"></div>
<div id="bottom">
<div id="red" class="color"></div>
<div id="blue" class="color"></div>
<div id="yellow" class="color"></div>
<div id="white" class="color"></div>
</div>
</div>
<script src="demo.js"></script>
</body>
为什么它不起作用
问题似乎是.color
的事件侦听器在.egg
的事件侦听器中声明。这意味着每次单击.egg
时，都会为.color
创建一个新的事件处理程序
第二次单击.color
时，它仍在运行第一次单击时的事件。而且，由于您已将id
更改为'
，因此getElementById（''）
确实是null
可能的解决办法
将.color
事件侦听器移到.egg
事件侦听器之外。您还必须更改clickedID
变量的范围
$(document).ready(function(){
var clickedId = '';
//Select the div to change the background color
$(".egg").click(function() {
clickedId = $(this).attr("id");
alert(clickedId);
});
//Updating the background color for selected div
$(".color").click(function() {
var clickedColor = $(this).attr("id");
if(clickedId != '') document.getElementById(clickedId).style.backgroundColor = clickedColor;
});
});
为什么？你已经知道你所处的元素了，为什么还要麻烦用另一种方式重新获取它来改变颜色？谢谢你的回答。我以前也有过这样的回答，但是，clickedd
的值没有继续。我试图使它全球化，但我一定是做错了什么，因为它不起作用。你有什么建议吗？当你如果要更改范围，您的确切意思是什么？再次感谢！@Millica我添加了代码。更改范围在javascript中是一个非常重要的问题。我会花时间去理解它。您是一个明星！非常感谢您的帮助！我还会查看您建议的链接。您知道的越多…：）再次感谢！！