Question

我被要求为this page添加另一种颜色选项。如果您点击马赛标志，卡车将从橙色变为蓝色;如果再次单击它会变回橙色。如果单击右侧的探索标志，则可以使用两个视图，这两个视图也具有交换的图像颜色。

我想在页面中添加一个新的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";
             }

        });

Answer 1

试试这个

<强>更新

  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 color是deafult颜色，是橙色...结束if / else条件是beacuse sine你也有三个图像Explore ..你需要一个循环和循环你正在chekcing颜色...所以在第一次调用..橙色是颜色，所以它chnages为蓝色（运行循环3次..）然后来到这个if / else条件，将值颜色更改为蓝色...在第二次单击。因为现在颜色是蓝色..循环将其变为黄色......依此类推......

Answer 2

首先，跳到我身边的是你两次同样的功能。

你也可以这样对待它：

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;告诉我，swithc的颜色是什么。因此，如果要添加第三种颜色，则不能再使用简单的布尔值，因为它只有两个值。为了保持代码清晰，我会使用一个字符串。

您的代码可能如下所示：

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";
        }
    });
});

这会将颜色从橙色变为蓝色再变为黄色，然后再变回橙色，完成色圈。

点击多个div时交换图像

2 个答案: