javascript - 如何使用表单和 javascript 进行图像交换

Question

所以我正在尝试使用具有 2 个下拉选项的表单制作图像交换代码。

它的项目颜色选项称为小部件，外部和内部颜色。我一直在摸索着解决这个问题并编写了这段代码。

这是我的 HTML

<img id="Imageholder" src="../images/placeholder.jpg" />
<form>
Interior Color:
<select name="covers">
<option value="or1">Orange</option>
<option value="be1">Blue</option>
<option value="rd1">Red</option>
<option value="bk1">Black</option>
<option value="gm1">GunMetal</option>
</select>
<p>Exterior Color:
<select name="wheels">
<option value="or2">Orange</option>
<option value="be2">Blue</option>
<option value="rd2">Red</option>
<option value="bk2">Black</option>
<option value="gm2">GunMetal</option>
</select></p>
<button onclick="function(Imagechange)">Change</button>
</form>

这是我的JS

// Place Holder
var Pholder = document.getElementById("Imageholder");
// The List
var Imglist = [ 
"Http://../images/imageOrOr.jpg,
Http://../images/imageOrBe.jpg,
Http://../images/imageOrRd.jpg,"
  ];
  // List Values
  var covers, wheels;
  // Interior Variables
 var be1, rd1, bk1, gm1, or1;
 // Exterior Variables
 var be2, rd2, bk2, gm2, or2;

function Imagechange () {
switch (covers,wheels) {
 case 0:
 if (covers = or1, wheels = or2) {
  Document.getElementbyId(Pholder) == Imglist[0];
 }
     break;
 case 1:
 if (covers = or1, wheels = be2) {
  Document.getElementbyId(Pholder) == Imglist[1];
 }
    break;
 case 2:

    break;
 }
}

不是全部，但我认为这应该足以实现我想要做的事情。

不幸的是，无法使用正确的链接和所有内容，所以我不确定哪里出了问题。

最终我想要的是，当人们选择 2 个选项并单击按钮时，图像将出现在按钮上方，当更改选项并再次单击时，将图片更改为他们选择的选项。

我对 JavaScript 的了解有限，对 jquery 也同样如此，但任何使这项工作有效的方法或更好的方法都会对我有所帮助。

Answer 1

所以我的想法是正确的，根据所选选项的组合，适当的图像应该替换“Imageholder”中的当前图像，对吗？？

如果是这样，下面的代码应该对您有所帮助。我没有做所有的选择，但你应该明白了。因此，当在两个选择框中都选择橙色并单击按钮时，图像将更改为所需图像。然后，您可以将这个想法传播到所有组合，并让它们根据所选组合切换图像。您需要在代码中包含 jQuery 库才能使用它。

我在底部放了一个 jsFiddle 链接，您可以查看。祝你好运!

<img id="Imageholder" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="300" height="300"/>
<form>
Interior Color:
<select name="covers" id="covers">
<option value="or1">Orange</option>
<option value="be1">Blue</option>
<option value="rd1">Red</option>
<option value="bk1">Black</option>
<option value="gm1">GunMetal</option>
</select>
<p>Exterior Color:
<select name="wheels" id="wheels">
<option value="or2">Orange</option>
<option value="be2">Blue</option>
<option value="rd2">Red</option>
<option value="bk2">Black</option>
<option value="gm2">GunMetal</option>
</select></p>
<button id="changeBtn">Change</button>
</form>

JS:

$(function() { 

    $('#changeBtn').click(function( e ){
    e.preventDefault();

    var newImage = 'http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg'

        if(($('#covers').val() == 'or1') && ($('#wheels').val() == 'or2')){
            $('img').attr('src', newImage);
        }

        else {
            alert('error')
        }

    });
});

JSFiddle Link