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

How to image swap using forms and javascript

本文关键字：图像 交换 javascript 何使用 表单      更新时间：2023-09-26

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

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

这是我的网页

<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 相同，但任何使这项工作或更好的方法都会对我有所帮助。

只是为了让我有正确的想法，根据所选选项的组合，适当的图像应该替换"图像持有人"中的当前图像，对吗？

如果是这样，下面的代码应该对您有所帮助。我没有做所有的选择，但你应该明白这个想法。因此，当在两个选择框中都选择橙色并单击按钮时，图像将更改为所需的图像。然后，您可以通过所有组合传播此想法，并让他们根据所选组合切换图像。您需要在代码中包含 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

相关文章：