0

ユーザーが項目を選択できるドロップダウン メニューを持つ Web サイトを作成しようとしています。キャプション付きの画像が表示されます。これを機能させる方法がわかりません。ドキュメントに画像を追加する空白の段落タグがあります。

<!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();
    });
});
4

2 に答える 2

2

jQuery の関数を使用して関数を実行する必要がありますchange()。

これは、トリミングされた動作中の JSFiddle です: http://jsfiddle.net/UckER/ - 画像を変更するために必要なコードのみを含めました。多少調整する必要があるかもしれませんが、これで正しい軌道に乗るはずです。ご不明な点がございましたら、お知らせください。

于 2013-03-13T03:03:05.443 に答える
2

コードに明らかな間違いがいくつかあります。コードを最初に見たときに見つけることができる基本的なもののいくつかを次に示します。

  1. jQuery は#selector、その ID を持つものがコードに存在しない場合に定義されます。そのはず：

    <select name="menu" id="selector">

  2. メソッドでは、関数を として定義している間に関数を.change()呼び出しています。swap_pictures()imgSwap()

  3. imgSwap関数では、変数の値を設定していますがcheckIndex、後で if 条件で設定します。あなたが持っている

    if (index === 0) {

    ここindexでも未定義の変数です。

編集

それがほとんどすべてだったと思います。それらをすべて修正すると、この作業フィドルが発生しました

于 2013-03-13T03:10:27.213 に答える