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

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

1 个答案: