如何在不使用兩個獨立輸入單選按鈕組的情況下顯示圖像 <form> 標簽
[英]How to display an image depending on two different input radio button groups without using <form> tag
問題描述
我對編碼非常陌生。 我正在上課，但我的老師並沒有真正在教書。 我有一個項目，需要在該項目中建立一個網頁，“客戶”可以在該網頁上自定義他們的產品...一輛汽車。 我需要使用javascript，html和CSS。 我以前從未做過這樣的事情，正如我提到的，我仍然是新手。 我在html和css上有一堂課，所以我知道基礎知識。 但是，這是我的第一個javascript類。而且...他剛剛把項目扔給了我們，並告訴我們要解決這個問題。 所以我被困住了。
基本上，這就是我要完成的工作：我需要客戶能夠選擇兩個不同的選項（顏色，輪胎類型）。 基於這些選項，單擊按鈕后，我需要頁面上的圖像進行更改。 我知道我不想使用表單標簽，因為我不想將“表單”發送到服務器。 甚至嘗試使用php。 我有36張不同的圖片。 有6種顏色選擇和6種輪胎選擇。 我的圖像另存為blackTire1.jpg，blackTire2.jpg，redTire3.jpg等。此刻，我正嘗試使用開關盒來獲取選中的單選按鈕的值，將它們融合在一起，然后使用img src拍攝該“字符串”並返回正確的圖片。 我希望這是有道理的。
我所擁有的如下。 我現在完全不用擔心CSS。 我的主要重點是使代碼首先工作。 忍受我，因為我還很新。 此代碼可能有幾個問題，而且非常混亂。 如果您什至看不到任何語法，請提及。 預先感謝您的任何投入。
<html>
<head>
<script language="javascript" type="text/javascript">
function("input:radio[name=color], input:radio[name=tire]") {
var colorValue = $('input:radio[name=color]:checked').val();
var tireValue = $('input:radio[name=tire]:checked').val();
var image_name = "";
switch (colorValue) {
case 'black':
image_name += "black";
break;
case 'red':
image_name += "red";
break;
case 'blue':
image_name += "blue";
break;
case 'yellow':
image_name += "yellow";
break;
case 'white':
image_name += "white";
break;
case 'silver':
image_name += "silver";
break;
default:
image_name += "black";
break;
}
switch (tireValue) {
case 'Tire1':
image_name += "Tire1.jpg";
break;
case 'Tire2':
image_name += "Tire2.jpg";
break;
case 'Tire3':
image_name += "Tire3.jpg";
break;
case 'Tire4':
image_name += "Tire4.jpg";
break;
case 'Tire5':
image_name += "Tire5.jpg";
break;
case 'Tire6':
image_name += "Tire6.jpg";
break;
default:
image_name += "Tire1.jpg";
break;
}
alert(image_name);
$image.attr('src', image_name);
});
</script>
</head>
<body>
<section>
<img src="blackTire1.jpg" name="formula" id="formula">
<br><br>
<input type="radio" name="color" value="black" checked /> <img src="black.jpg"/>
<br><br>
<input type="radio" name="color" value="red"/> <img src="red.jpg"/>
<br><br>
<input type="radio" name="color" value="silver"/> <img src="silver.jpg"/>
<br><br>
<input type="radio" name="color" value="white"/> <img src="white.jpg"/>
<br><br>
<input type="radio" name="color" value="yellow"/> <img src="yellow.jpg"/>
<br><br>
<input type="radio" name="color" value="blue"/> <img src ="blue.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire1" checked /> <img src="Tire1.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire2"/> <img src="Tire2.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire3"/> <img src="Tire3.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire4"/> <img src="Tire4.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire5"/> <img src="Tire5.jpg"/>
<br><br>
<input type="radio" name="tire" value="Tire6"/> <img src="Tire6.jpg"/>
<br><br>
<button onclick="function("input:radio[name=color], input:radio[name=tire])">See Your Car</button>
</section>
</body>
</html>
這是github上代碼的鏈接： https : //gist.github.com/anonymous/71dd2a1ed5b39b8486ab1b1117abd4b3
2 個解決方案
解決方案1
0 已采納 2016-05-17 12:05:47
問題出在函數的定義上。
function("input:radio[name=color], input:radio[name=rim]") {
應該
function changeTireImage() {
並且按鈕應該是
<button onclick="changeTireImage();">See Your Car</button>
並且在函數之后有一些額外的結束代碼);
編輯：和$image變量未定義
function changeTireImage() { var colorValue = $('input:radio[name=color]:checked').val(); var tireValue = $('input:radio[name=tire]:checked').val(); var image_name = ""; switch (colorValue) { case 'black': image_name += "black"; break; case 'red': image_name += "red"; break; case 'blue': image_name += "blue"; break; case 'yellow': image_name += "yellow"; break; case 'white': image_name += "white"; break; case 'silver': image_name += "silver"; break; default: image_name += "black"; break; } switch (tireValue) { case 'Tire1': image_name += "Tire1.jpg"; break; case 'Tire2': image_name += "Tire2.jpg"; break; case 'Tire3': image_name += "Tire3.jpg"; break; case 'Tire4': image_name += "Tire4.jpg"; break; case 'Tire5': image_name += "Tire5.jpg"; break; case 'Tire6': image_name += "Tire6.jpg"; break; default: image_name += "Tire1.jpg"; break; } alert(image_name); var $image = $('#formula'); $image.attr('src', image_name); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section> <img src="blackTire1.jpg" name="formula" id="formula"> <br><br> <input type="radio" name="color" value="black" checked /> <img src="black.jpg"/> <br><br> <input type="radio" name="color" value="red"/> <img src="red.jpg"/> <br><br> <input type="radio" name="color" value="silver"/> <img src="silver.jpg"/> <br><br> <input type="radio" name="color" value="white"/> <img src="white.jpg"/> <br><br> <input type="radio" name="color" value="yellow"/> <img src="yellow.jpg"/> <br><br> <input type="radio" name="color" value="blue"/> <img src ="blue.jpg"/> <br><br> <input type="radio" name="tire" value="Tire1" checked /> <img src="Tire1.jpg"/> <br><br> <input type="radio" name="tire" value="Tire2"/> <img src="Tire2.jpg"/> <br><br> <input type="radio" name="tire" value="Tire3"/> <img src="Tire3.jpg"/> <br><br> <input type="radio" name="tire" value="Tire4"/> <img src="Tire4.jpg"/> <br><br> <input type="radio" name="tire" value="Tire5"/> <img src="Tire5.jpg"/> <br><br> <input type="radio" name="tire" value="Tire6"/> <img src="Tire6.jpg"/> <br><br> <button onclick="changeTireImage();">See Your Car</button> </section>
解決方案2
0 2016-05-17 12:19:55
我看到三個問題。 首先，如果要從html調用函數，則需要給函數命名。 就像是：
<button onclick="setImage('input:radio[name=color]', 'input:radio[name=tire]');">
See Your Car</button>
然后在函數中，您需要傳遞這些參數：
function setImage(colorSelector, tireSelector) {
var colorValue = $(colorSelector+':checked').val();
var tireValue = $(tireSelector+':checked').val();
最后一件事是您需要處理圖像，未定義$image 。 代替$image.attr('src', image_name); 您需要類似$('#formula').attr('src', image_name);
根據單選按鈕的答案，使表單提交顯示不同的頁面
[英]Make a form submit display a different page depending on radio button answers
一個按鈕如何根據選擇的單選按鈕顯示不同的結果
[英]How can a button display different results depending on radio button selected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.