根据下拉菜单中的值显示/隐藏图像


show / hide images depending on value from drop menu

我需要一个下拉菜单,这个下拉菜单将是一个数值,我只想根据这个值显示一定数量的图像。

有人能帮忙吗。

<div>
            <select id="selectLevel" style="width:8%" onChange="changeOPLevel()">
                <option value="1" selected=""> Level 1</option>
                <option value="2"> Level 2</option>
                <option value="3"> Level 3</option>
                <option value="4"> Level 4</option>
                <option value="5"> Level 5</option>
                <option value="6"> Level 6</option>
            </select>
</div>

图像为

<img src="buildings/lvl 4.png">

现在,场景将是,如果选择级别5,则将有14张图片(都是同一张图片),如果选择了级别6,则有16张图片。如果有人能在这两方面提供帮助,我将能够修改它来做我需要的一切。

提前感谢

wayne

如果我正确理解您的问题,您有16个图像,并且您希望根据所选级别L显示其中的数字N,其中N=2L+4。

您可以使用几行jQuery:来完成此操作

var n = $('#selectLevel').val()*2+4;
$('img').show().eq(n-1).nextAll().hide();

第一行确定要显示的图像数。

第二行做五件事:

  1. $('img'):选择页面上的所有图像作为集合
  2. .show():这显示了所有这些图像
  3. .eq(n-1):这获取第n个图像。(在JavaScript中,集合是从零开始的,所以我们必须从n中减去1。)
  4. .nextAll():这将选择在步骤3中找到的图像的所有以下同级
  5. .hide():这将隐藏在步骤4中选择的所有同级

Fiddle:http://jsfiddle.net/v44LwLhr/1/