我被要求在此页面中添加另一种颜色选项。如果您单击马赛标志,卡车会从橙色变为蓝色;如果再次单击它,它会变回橙色。如果单击右侧的探索标志,则会出现两个视图,它们也具有交换的图像颜色。
我想向页面添加一个新的 div,使其变为黄色。所以蓝色按钮应该从黄色或橙色变为蓝色,然后如果在蓝色时单击它,则返回橙色。黄色按钮应从蓝色或橙色变为黄色,然后再变为橙色。
蓝色按钮不应使卡车变黄,黄色按钮不应使其变蓝。
如果有人单击“探索”,则所选颜色需要保持不变。
这是进行图像交换的原始 jQuery:
var isOrange = true;
$("#marseilleBtn").click(function(){
$("img.img-swap").each(function(){
if(isOrange){
this.src = this.src.replace("_orange","_blue");
} else{
this.src = this.src.replace("_blue","_orange");
}
});
if(isOrange){
isOrange = false;
} else {
isOrange = true;
}
});
我没有编写这段代码,而且我是 jQuery 新手,所以这对我来说很有挑战性。我写了这段代码,它几乎可以工作。问题是,如果黄色卡车开着,我点击蓝色标志,它不会改变颜色。另外,如果蓝色卡车亮着,我点击黄色标志,它不会改变颜色。如果我从橙色开始,它只会改变颜色......希望这是有道理的。
var isOrange = true;
$("#marseilleBtn").click(function(){
$("img.img-swap").each(function(){
if(isOrange){
this.src = this.src.replace(("_orange") || ("_soleil"),"_blue");
} else{
this.src = this.src.replace("_blue","_orange");
}
});
if(isOrange){
isOrange = false;
} else {
isOrange = true;
}
});
var isOrange = true;
$("#soleilBtn").click(function(){
$("img.img-swap").each(function(){
if(isOrange){
this.src = this.src.replace(("_orange") || ("_blue"),"_soleil");
} else{
this.src = this.src.replace("_soleil","_orange");
}
});
if(isOrange){
isOrange = false;
} else {
isOrange = true;
}
});
任何人都可以帮助我实现我想要做的事情吗?如果您也知道更好的方法,我对完全不同的方法持开放态度……走这条路是因为我是从给定的代码开始的。我也尝试创建一个 OR 语句,但这根本不起作用,不知道为什么:
this.src = this.src.replace(('_orange, _yellow'),'_blue');
奖金问题!我对这段代码的第一部分感到困惑,它将变量 isOrange 声明为 true,然后最后的 if/else 语句将其声明为 false。谁能帮我分解一下?我理解它的图像交换部分......
if(isOrange){
isOrange = false;
} else {
isOrange = true;
}
});
提前感谢您的帮助。
更新:
正在处理此问题,但在更改两次后需要额外单击才能更改颜色。即点击马赛,变成蓝色。单击马赛,变为橙色。点击点击返回马赛。
var color = "orange"; //first default color of img is orange
$("#marseilleBtn").click(function(){ //on click
$("img.img-swap").each(function(){ // find all the images that has class img-swap ..i guess there is 3 more images there
if(color == "orange"){ //check if orange .. which is correct and
this.src = this.src.replace("_orange","_blue"); //change it to blue
} else if(color == "yellow"){ //if yellow
this.src = this.src.replace("_soleil","_blue"); //chnage to yello
}else{ //if blue
this.src = this.src.replace("_blue","_orange"); //chnage to yellow
}
});
if(color =="orange"){
color = "blue";
}else if(color == "blue"){
color = "yellow";
}else{
color = "orange";
}
});
var color = "orange"; //first default color of img is orange
$("#soleilBtn").click(function(){ //on click
$("img.img-swap").each(function(){ // find all the images that has class img-swap ..i guess there is 3 more images there
if(color == "orange"){ //check if orange .. which is correct and
this.src = this.src.replace("_orange","_soleil"); //change it to yellow
} else if(color == "blue"){ //if blue
this.src = this.src.replace("_blue","_soleil"); //chnage to yello
}else{ //if yellow
this.src = this.src.replace("_soleil","_orange"); //chnage to yellow
}
});
if(color =="orange"){
color = "blue";
}else if(color == "blue"){
color = "yellow";
}else{
color = "orange";
}
});