Jquery 全局变量更改后函数仍在工作
好的,我有密码:Jquery 全局变量更改后函数仍在工作,jquery,html,Jquery,Html,好的,我有密码: $(document).ready(function(){ if(selected == 0){ $(".color").mouseover(function(){ var image = $(this).children('img').attr('src'); $(this).children('img').css("border", "2px solid #000000"); $("#itemMainImg").att
$(document).ready(function(){
if(selected == 0){
$(".color").mouseover(function(){
var image = $(this).children('img').attr('src');
$(this).children('img').css("border", "2px solid #000000");
$("#itemMainImg").attr("src", image);
});
$(".color").mouseout(function(){
$(this).children('img').css("border", "none");
})
$(".color").click(function(){
var image = $(this).children('img').attr('src');
console.log("worked");
$("#itemMainImg").attr("src", image);
$(this).children('img').css("border", "2px solid #000000");
selected = 1;
console.log(selected);
colorSelected = $(this).children('img').attr('src');
});
}
else{
$(".color").click(function(){
var image = $(this).children('img').attr('src');
if(image == colorSelected){
$("#itemMainImg").attr("src", image);
if($(this).children('img').css("border") == "none"){
$(this).children('img').css("border","2px solid #000000");
}
else{
$(this).children('img').css("border", "none");
selected = 0;
}
}
});
}
});
我将一个全局变量赋值为var selected=0
和var colorSelected=“”
html如下所示:
<div id="itemHead">
<div id="itemMain">
<h1 id="itemH1">Demo Item by Demo</h1>
<img id="itemMainImg" src="photos/Carpets/ApolloBoxwood - Copy.jpg">
</div>
<div id="itemColors">
<div>
<p id="colorsP">Available Colours</p>
</div>
<div>
<div class="color">
<img class="colorImg" src="photos/Carpets/ApolloBoxwood - Copy.JPG" alt="Apollo Plus Boxwood">
<p class="colorPara">Boxwood</p>
</div>
<div class="color">
<img class="colorImg" src="photos/Carpets/ApolloCinderGrey - Copy.JPG" alt="Apollo Plus Cinder Grey">
<p class="colorPara">Cinder Grey</p>
</div>
<div class="color">
<img class="colorImg" src="photos/Carpets/ApolloCorkOak - Copy.JPG" alt="Apollo Plus Cork Oak">
<p class="colorPara">Cork oak</p>
</div>
</div>
</div>
逐项演示
可用颜色
黄杨木
煤渣灰
软木橡木
由于某种原因,当我单击.color div时,所选的值被更改为1,但函数的作用仍然类似于值为0。因此,在页面上,var selected被设置为1,但if语句的第一部分仍然有效。我不认为应该这样做,因为我已通过单击更改了全局变量。您正在基于所选的
值将单击事件绑定到document ready上-只有代码中的第一个单击事件将绑定到元素,因为初始值为零。您需要将逻辑移入click函数,以便在每次函数运行时检查该值:
$(document).ready(function(){
$(".color").click(function(){
if(selected == 0){
/* do something if value is zero */
} else {
/* do something if value is NOT zero */
}
});
});
谢谢,仍然有一些调整,但它起了作用。