このページに別のカラーオプションを追加するように依頼されました。マルセイユの標識をクリックすると、トラックがオレンジ色から青色に変わります。もう一度クリックするとオレンジ色に戻ります。右側の探索サインをクリックすると、画像の色が入れ替わった2つのビューが利用可能になります。
ページに黄色になる新しい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として宣言するこのコードの最初の部分と、それをfalseと宣言する最後のif/elseステートメントに混乱しています。誰かが私のためにそれを分解できますか？私はそれの画像交換部分を理解しています...
if(isOrange){
isOrange = false;
} else {
isOrange = true;
}
});
助けてくれてありがとう。
アップデート：
これに取り組んでいますが、2回変更した後、色を変更するには追加のクリックが必要です。つまり、マルセイユをクリックして、青に変わります。Marseilleをクリックすると、オレンジ色に変わります。クリックしてマルセイユに戻ります。
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";
}
});