Question

我对编码很新。我正在上课，但我的老师并不是在教学。我有一个项目，我需要建立一个网页，“客户”可以自定义他们的产品......汽车。我需要使用javascript，html和css。我之前从未做过这样的事情，正如我所提到的，我仍然是新手。我有一个关于html和css的课程，所以我知道基础知识。然而，这是我的第一个javascript类....而且......他刚刚把这个项目扔给我们并告诉我们弄清楚它。所以我被困住了。

基本上这就是我要完成的任务：我需要顾客能够选择两种不同的选择（颜色，轮胎类型）。基于这些选项，我需要在单击按钮后更改页面上的图像。我知道我不想使用表单标签，因为我不想将“表单”发送到服务器。甚至尝试使用PHP。我有36个不同的图像。有6种颜色选择和6种轮胎选择。我的图像保存为blackTire1.jpg，blackTire2.jpg，redTire3.jpg等。目前我正在尝试使用switch case获取已检查单选按钮的值，将它们混合在一起，然后使用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

Answer 1

问题来自你的功能定义。

function("input:radio[name=color], input:radio[name=rim]") {

应该是

function changeTireImage() {

AND按钮应为

<button onclick="changeTireImage();">See Your Car</button>

在函数);

之后还有一些额外的结束代码

编辑：并且$image变量未定义

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我看到三个问题。首先，如果要从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);

如何根据两个不同的输入单选按钮组显示图像而不使用<form>标记

2 个答案: