Question

我有一个javascript数组，可以在选择其名称时更改图像（瀑布，日落，白树）。它现在是下拉菜单的形式，但我想知道我是否可以将其更改为常规的无序列表。我不想使用jquery。

如果无法将数组更改为无序列表，是否还有其他方法可以根据用户交互（onclick）更改div中的内容？即图像下方的三个不同链接。单击链接后，将显示不同的图像装入div。这必须用一个函数完成。

HTML

    <body>

    <img src="images/photo1.jpg" name="sunset">

    <ul> 
<select onClick=imageSwap(this) name=cached>
    <option value=image1>Sunset</option>
    <option value=image2>Waterfall</option>
    <option value=image3>White Tree</option>
</select>
    </ul>

    </body>

JAVASCRIPT

    if(document.images) {
    imageSwap = new Array();

    image1 = new Image()
    image1.src = "images/photo1.jpg"
    image2 = new Image()
    image2.src = "images/photo2.jpg"
    image3 = new Image()
    image3.src = "images/photo3.jpg"

    function imageSwap(list) {

    var img = list.options[list.selectedIndex].value; 

    document.sunset.src = eval(img + ".src");
    }
    }

Answer 1

您可以创建以下链接：

<a href="#" onclick="changeImg('image1.jpg')">Image 1</a>
<a href="#" onclick="changeImg('image2.jpg')">Image 2</a>

和一个功能：

function changeImg(src) {
  document.getElementById("imgId").src = src;
}

其中 imgId 是您的<img>元素的ID。

以下是一个例子：

http://jsfiddle.net/6WS2K/4/

将下拉菜单数组更改为不带jQuery的常规无序列表

1 个答案: