0

WebサイトにJavaScriptを埋め込む必要がありますが、次のようにします。

Webサイト内に一連の非表示の画像を配置したいのですが、ユーザーからの（クエリボックスへの）入力に応じて、特定の入力値に指定された特定の画像が表示されるため、非表示になりません。

私の場合、時刻表を作成していて、5つの画像のセットがあります。たとえば、ユーザーが「月曜日」と入力すると、この値（月曜日の時刻表）に設定された画像が表示されます。htmlドキュメント用にこのJavaScriptを書くのを手伝ってください。

4

1 に答える 1

1

データ属性を使用して、特定の要素（画像）を対応するオプションにリンクできます。

<select id="dow">
    <option>-- PLEASE SELECT --</option>
    <option data-target='div1'>Monday</option>
    <option data-target='div2'>Tuesday</option>
</select>
<div id="images">
    <div id="div1" class="hidden">Image for Monday</div>
    <div id="div2" class="hidden">Image for Tuesday</div>
</div>

次のスクリプトを使用して、適切な画像を表示できます。

​$('#dow').change(function() {
    var id = $(this).find(':selected').data('target');
    $('#images > div').hide();
    $('#' + id).show();
});​​​​

このデモを参照してください。

于 2012-11-06T13:27:40.917 に答える