javascript - 用于 html 的 Javascript 可根据用户输入显示最初是隐藏元素的特定图像

Question

我需要在网站中嵌入一些 javascript，我想要它做的是以下内容：

我想在网站内有一组隐藏的图像，并且根据用户的输入（进入查询框），指定给某个输入值的某个图像应该出现，因此不再不可见。

在我的情况下，我正在制作一个时间表并且我有 5 张图像，当用户输入例如“星期一”时，应该出现设置为此值的图像（星期一时间表）。请帮我为 html 文档编写这个 javascript。

Answer 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();
});​​​​

请参阅此演示。