Question

我是javascript的初学者，我想根据我的下拉菜单中的选项更改图片（选择）我发现这个tutorial，但我遇到了一些问题。

在本教程中，他们将iljbild替换为您要使用的图片文件的名称如果你想使用代码，因为图片文件的名称必须与示例中的类型相同，即告诉文件的唯一区别应该是数字，例如pict0.gif，pict2.gif等等如果你使用jpg图像，你将不得不用jpg替换gif。设置图像的宽度和高度如果您更改选择列表中的（长度）单词，您还必须更改charAt后面的数字（此处为8）

这就是我通过以下方式替换iljbid所做的： http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg 但它不起作用。

Answer 1

此处尝试 FIDDLE

<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
    <option value="1" selected>Picute 1</option>
    <option value="2">Picute 2</option>
    <option value="3">Picute 3</option>
    <option value="4">Picute 4</option>
    <option value="5">Picute 5</option>
</select>

var pictureList = [
    "http://lorempixel.com/400/200/sports/1",
    "http://lorempixel.com/400/200/sports/2",
    "http://lorempixel.com/400/200/sports/3",
    "http://lorempixel.com/400/200/sports/4",
    "http://lorempixel.com/400/200/sports/5", ];

$('#picDD').change(function () {
    var val = parseInt($('#picDD').val());
    $('img').attr("src",pictureList[val]);
});

Answer 2

本教程希望您有一个具有命名约定的图像列表。那是{prefix} {number}。{extension}。例如： image0.jpg image1.jpg image2.jpg 等等...

所有图像上的前缀必须相同，并且所有图像上的扩展名必须相同。这是一个简单的教程，可以完成效果。

一旦掌握了更多JavaScript知识，就可以扩展它。

此外，该教程非常糟糕（并不意味着不尊重，但它确实缺乏。将示例本身复制并粘贴到JSFiddle中会引发任何错误。）

该教程是从1998年开始的。那是16岁。我强烈建议你寻找更新的教程。（2010 +）

以下是本教程的示例副本： http://jsfiddle.net/VmWD9/

<强> HTML

<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
    <select size="8" name="switch" onchange="switchImage();">
        <option value="1">Image 1</option>
        <option value="2">Image 2</option>
        <option value="3">Image 3</option>
        <option value="4">Image 4</option>
        <option value="5">Image 5</option>
        <option value="6">Image 6</option>
        <option value="7">Image 7</option>
    </select>
</form>

<强>的JavaScript

// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
    document.myImage.src = imageList[selectedImage].src;
}

虽然现在人们使用JavaScript库（如jQuery或MooTools）来完成这样的事情。我确实发现在进入这些库之前首先在纯JS中进行探索是更好的，尽管这不是必需的。这些库中的大多数都很容易掌握，但是当你想要制作一些大的东西时，你可能需要具备以前的JS知识。

我建议您浏览Codecademy JavaScript教程。

Answer 3

有多种方法可以实现所需。

This one是在选择value事件后获取数字change，并从src数组键中获取imagesArray。

<select id="changeImage">
  <option value="0">image 0</option>
  <option value="1">image 1</option>
  <option value="2">image 2</option>
</select>
<img id="image" src='//placehold.it/50x50/cf5'>

var imagesArray = [
  "//placehold.it/50x50/cf5", // represents val 0,
  "//placehold.it/50x50/f1f", // 1,
  "//placehold.it/50x50/444"  // 2 ...
];

$('#changeImage').change(function(){
  $('#image')[0].src = imagesArray[this.value];
});

The other one是在option文字中包含图片名称：

<select id="changeImage">
  <option>image.jpg</option>
  <option>something.png</option>
  <option>nature.jpg</option>
</select>
<img id="image" src='image.jpg'>

$('#changeImage').change(function(){
  $('#image')[0].src = this.value;
});

使用javascript根据下拉列表更改图像。

3 个答案: