Question

我正在尝试创建一个网站，其中包含一个允许用户选择项目的下拉菜单，图片将显示带有标题。我似乎无法弄清楚如何使这个工作。我有一个空白的段落标记，可以将图像附加到文档中。

<!DOCTYPE HTML>
<html>
<head>
    <title>A JavaScript Template Page</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <p>
        What kind of mood are you in today?
    </p>
    <select name="menu" id="menu"> //dropdown menu
        <option value="1">
            Choose your option
        </option>
        <option value="2">
            Happy
        </option>
        <option value="3">
            Angry
        </option>
        <option>
            Sad
        </option>
        <option>
            Grumpy
        </option>
    </select>
    <p id="img-swap">

    </p>
    <h1 id="captions"></h1>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

在script.js

var img = ['empty', 'happy', 'angry', 'sad', 'grumpy'];
var im = [];
var sayings = ['How are you feeling today?', 'Happy cat is happy', 'Angry cat is angry', 'Sad cat is sad', 'Grumpy cat is grumpy'];

function imgSwap() {
    var checkIndex = $('#selector').prop('selectedIndex');
    if (index === 0) {
        $('#img-swap').hide();
    } else {
        $('#img-swap').html('<img src="images/' + img[index] + '.jpg" width="600px" height="400px" alt="cats">').hide().show();
        }
        $('#captions').html(sayings[index]);
    }
    $(function() {
    for (var i = 1; i < img.length; i++) {
        im[i] = new Image();
        im[i].src='images/' + img[i] +'.jpg'
        }
        $('#selector').change(function() {
        swap_pictures();
    });
});

Answer 1

您需要使用jQuery的change()函数来运行该函数。

这是一个精心设计的JSFiddle：http://jsfiddle.net/UckER/ - 我只包含了更改图像所需的代码。您可能需要对其进行一些调整，但这应该会让您走上正轨。如果您有任何问题，请告诉我。

Answer 2

你的代码中有一些非常明显的错误。以下是我在第一次查看代码时可以找到的一些基本内容：

当代码中没有任何带有该ID的内容时，您的jQuery在#selector上定义。它应该是：
```
<select name="menu" id="selector">
```
在您的.change()方法中，您正在调用swap_pictures()函数，而您已将该函数定义为imgSwap()。
在imgSwap函数中，您要设置checkIndex变量的值，但稍后在if条件中设置值;你有
```
if (index === 0) {
```
其中index再次是未定义的变量。

修改

我猜这几乎就是全部。修复它们导致了这项工作fiddle

图像选择器不工作

2 个答案:

修改