Jquery 从多个div单击时交换图像
我已被要求添加另一个颜色选项到。如果你点击马赛标志,卡车将从橙色变为蓝色;如果再次单击它,它将变回橙色。如果单击右侧的“浏览”标志,则会有两个视图可用,它们也具有交换的图像颜色 我想在页面上添加一个新的div,使其变为黄色。所以蓝色按钮应该从黄色或橙色变为蓝色,如果单击蓝色按钮,则返回橙色。黄色按钮应从蓝色或橙色变为黄色,然后再变回橙色。Jquery 从多个div单击时交换图像,jquery,if-statement,replace,swap,Jquery,If Statement,Replace,Swap,我已被要求添加另一个颜色选项到。如果你点击马赛标志,卡车将从橙色变为蓝色;如果再次单击它,它将变回橙色。如果单击右侧的“浏览”标志,则会有两个视图可用,它们也具有交换的图像颜色 我想在页面上添加一个新的div,使其变为黄色。所以蓝色按钮应该从黄色或橙色变为蓝色,如果单击蓝色按钮,则返回橙色。黄色按钮应从蓝色或橙色变为黄色,然后再变回橙色。 蓝色按钮不应使卡车变黄,黄色按钮不应使卡车变蓝 如果有人单击“浏览”,则所选颜色需要保持不变 以下是进行图像交换的原始jQuery: var
蓝色按钮不应使卡车变黄,黄色按钮不应使卡车变蓝 如果有人单击“浏览”,则所选颜色需要保持不变 以下是进行图像交换的原始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";
}
});
试试这个
已更新
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 == "yellow"){
color = "blue";
}else{
color = "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 = "yellow";
}else if(color == "blue"){
color = "yellow";
}else{
color = "orange";
}
});
和奖金答案!!!第一种
var颜色是deafult颜色,它是橙色。。。结束if/else条件是因为您也有三张用于探索的图像。。你需要一个循环,在循环中你正在检查颜色。。。所以在第一次通话中。。橙色是颜色,因此它会变为蓝色(运行循环3次…),然后出现此if/else条件,在第二次单击中将值颜色更改为蓝色。因为现在颜色是蓝色的。。循环会将其更改为黄色……等等 首先让我想到的是,你将同一个函数做了两次
你也可以这样做:
var isOrange = true;
$("#marseilleBtn, #soleilBtn").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;
}
});
if(isOrange)else isOrange=false代码>告诉,要切换到什么颜色。因此,如果您想添加第三种颜色,就不能再使用简单的布尔值,因为它只有两个值。为了保持代码清晰,我将使用字符串
您的代码可以如下所示:
var curentColor = "orange";
$("#marseilleBtn, #soleilBtn").click(function () {
$("img.img-swap").each(function () {
if (curentColor === "orange") {
this.src = this.src.replace("_orange", "_blue");
curentColor = "blue";
} else if(curentColor === "blue") {
this.src = this.src.replace("_blue", "_yellow");
curentColor = "yellow";
} else if(curentColor === "yellow") {
this.src = this.src.replace("_yellow", "_orange");
curentColor = "orange";
}
});
});
这会将颜色从橙色变为蓝色,再变为黄色,然后再变回橙色,完成颜色循环。不幸的是,这不起作用-当我单击卡车时,它会将卡车换成蓝色,但如果我单击“探索”按钮,它会变回橙色。我需要它在单击“浏览”时保持选定的颜色。不过我真的很感激你的建议。离得这么近!我不得不稍微修改一下,因为每个按钮只能在两种颜色之间更改,而不是在3种颜色之间更改,但由于某些原因,我的更改需要在第一次交换按钮后额外单击以将其更改回橙色。知道为什么吗?用我的代码版本更新了我的问题。好的。。更新代码。。。将此替换为您的代码并进行尝试。。我更新了两个项目的上次if条件。。您不需要var color=“orange”代码>两次。。移除下面的一个谢谢!它在本地工作…现在正在服务器上尝试。我真的很感谢您的帮助和教育:)很接近,但我在IE9中不断收到一条错误消息:backVisible未定义。你有没有机会帮忙聊天?如果没有,没问题。谢谢。我更新了我的问题以澄清-我需要蓝色按钮将卡车从橙色或黄色更改为蓝色,黄色按钮将卡车从蓝色或橙色更改为黄色,但每个按钮不需要在所有三种颜色之间循环。我确实尝试了你的代码,但控制台中出现语法错误。