ドロップダウンで別のオプションを選択してイメージを変更する - Javascript/Html

車を選択できるシステムがあります。その後、伝送と色を選択することができます。異なる車とトランスミッションは異なる色を出す。色を選択したときに車のイメージを表示する方法がわからない。たとえば、私はrs6と自動、そして次に黒の色を選択します。私は、選択された色に応じて画像を表示したいと考えています。どのようにしてそれをプログラムして、異なる車と色が異なる画像を表示するようにしますか？私は比較的新しいコーディングをしています。どんな援助も評価されるだろう。ドロップダウンで別のオプションを選択してイメージを変更する - Javascript/Html

今唯一のあなたの基本的な考え方を示すために、Audi - Automatic - black and blueのために働いているが、それはコードを繰り返していると、あなたは残りのために同じことを行うことができますするためにHTML

<!DOCTYPE html> 
<html><head> 
<title></title> 
</head> 

<body> 
<form name="CarConfigurator"> 
    <select id="car" name="Car_make"> 
     <option value="" selected="selected">Which car?</option> 
     <option value="car1">Audi RS6</option> 
     <option value="car2">BMW M4</option> 
     <option value="car3">Mercedes C63 AMG</option> 
     </select> 
    <br> 
    <br> 
    <select id="trans" name="A_M"> 
     <option value="" selected="selected">What trans?</option> 
     <option value="auto">Automatic</option> 
     <option value="man">Manual</option> 
     </select> 
    <br> 
    <br> 
    <select id="color" name="Color"> 
     <option value="" selected="selected">What Color?</option> 
     <option value="black">Black</option> 
     <option value="blue">Blue</option> 
     <option value="red">Red</option> 
     <option value="white">White</option> 
     <option value="green">Green</option> 
     </select> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/ 
</script> 
<script src="configurator.js"></script> 
</body> 
</html>

Javascriptを

$("#car").change(function() { 
transmission(); 
}); 

$("#trans").change(function() { 
transmission(); 
}); 

function transmission() { 
if ($("#car").val() == "car1" && $("#trans").val() == "auto") { 
    $("option[value$='red']").hide(); 
    $("option[value$='white']").hide(); 
    $("option[value$='green']").hide(); 
} else { 
    $("option[value$='red']").show(); 
    $("option[value$='white']").show(); 
    $("option[value$='green']").show(); 
} 
}

出典

2017-01-12 Duncher

質問がオフになっています彼らが有害な解答や迷惑メールを引き付けてしまう傾向があるため、スタックオーバーフローのための手法。代わりに、[問題を説明する]（http://meta.stackoverflow.com/questions/254393）、これを解決するためにこれまでに何が行われているか。 – nyedidikeke

@nyedidikeke彼はチュートリアルをお勧めすることを尋ねず、すべての関連コードを含んでいます。短い答えが分からない場合は、質問にフラグを立てないでください。 – ab29007

車も。

この例では、イメージのsrcを選択した車として設定しています。たとえば、car1とmanとredを選択し、srcをcar1manred.jpgと指定した場合は、変更を確認できるようにalt属性も変更しています。

多くの手動作業が必要です。私はあなたが各カテゴリにある車の数を決定するデータのためのオブジェクトを作成しました。あなたはそれにJSONを使う方が良いでしょう。

また、私はcar1autoblack（画像のsrcを取得します）を配列として作成しましたが、オブジェクトとして作成し、このカテゴリの車に関する他のものを含めることができます。例えば** **書籍、ツール、ソフトウェアライブラリ、チュートリアルや他のオフサイトのリソースをお勧めしますか見つけるために私たちを求めてname、price、availabilityとはるか

$("#car").change(function() { 
 
transmission(); 
 
    selection(); 
 
}); 
 

 
$("#trans").change(function() { 
 
transmission(); 
 
    selection(); 
 
}); 
 

 
$("#color").change(function() { 
 
    selection(); 
 
}); 
 

 
var cars = { 
 
    car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"], 
 
    car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"] 
 
} 
 

 
function transmission() { 
 
if ($("#car").val() == "car1" && $("#trans").val() == "auto") { 
 
    $("option[value$='red']").hide(); 
 
    $("option[value$='white']").hide(); 
 
    $("option[value$='green']").hide(); 
 
} else { 
 
    $("option[value$='red']").show(); 
 
    $("option[value$='white']").show(); 
 
    $("option[value$='green']").show(); 
 
} 
 
} 
 

 
function selection(){ 
 
    if ($("#car").val() && $("#trans").val() &&   $("#color").val()) { 
 
    var carVal = $("#car").val(); 
 
    var transVal = $("#trans").val(); 
 
    var colorVal = $("#color").val(); 
 
    var combineVal = carVal+transVal+colorVal; 
 
    //var imageLink = combineVal+".jpg"; 
 
    //$("#showImg").attr("src", imageLink); 
 
    //$("#showImg").attr("alt", imageLink); 
 
    //console.log(cars[combineVal]); 
 
    var inputDivHTML = ""; 
 
    var car = cars[combineVal]; 
 
    for(i in car){ 
 
     inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>"; 
 
    } 
 
    $(".imageHere").html(inputDivHTML); 
 
    } 
 
}

img.showImg{ 
 
    width:150px; 
 
    height:70px; 
 
    margin:10px 3px; 
 
    border:1px solid red; 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="CarConfigurator"> 
 
    <select id="car" name="Car_make"> 
 
     <option value="" selected="selected">Which car?</option> 
 
     <option value="car1">Audi RS6</option> 
 
     <option value="car2">BMW M4</option> 
 
     <option value="car3">Mercedes C63 AMG</option> 
 
     </select> 
 
    <br> 
 
    <br> 
 
    <select id="trans" name="A_M"> 
 
     <option value="" selected="selected">What trans?</option> 
 
     <option value="auto">Automatic</option> 
 
     <option value="man">Manual</option> 
 
     </select> 
 
    <br> 
 
    <br> 
 
    <select id="color" name="Color"> 
 
     <option value="" selected="selected">What Color?</option> 
 
     <option value="black">Black</option> 
 
     <option value="blue">Blue</option> 
 
     <option value="red">Red</option> 
 
     <option value="white">White</option> 
 
     <option value="green">Green</option> 
 
     </select> 
 
</form> 
 
<div class="imageHere"> 
 
    <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/> 
 
    <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/> 
 
    <img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/> 
 
</div>

出典

2017-01-12 02:35:15 ab29007

助けてくれてありがとう。申し訳ありませんが、さまざまな設定でさまざまな画像を表示する方法を明確にすることができます。コードから関数はid "showImg"にのみ適用されます。だから、私はもっと多くの画像のために何をしますか？再度ありがとう – Duncher

大丈夫、私は質問を理解すると思います。あなたは、あなたがaudi、マニュアルと赤であるすべての車を表示したいという意味です – ab29007

私に5分を与えます – ab29007

ドロップダウンで別のオプションを選択してイメージを変更する - Javascript/Html

答えて

関連する問題