Question

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

有人可以帮忙吗。

<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张图片（所有相同图像）和16张图像（如果选择等级6）。如果有人可以帮助解决这两个问题，我可以修改它以完成我需要的所有工作。

提前致谢，

韦恩

Answer 1

如果我正确理解了您的问题，那么您有16张图片，并且您希望根据所选级别 L 显示其中 N 的数字，其中N = 2L + 4.

你可以用几行jQuery做到这一点：

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

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

第二行做了五件事：

$('img')：这会选择页面上的所有图片作为集合。
.show()：显示所有这些图片。
.eq(n-1)：这会抓取n ^th图像。（在JavaScript中，集合从零开始，因此我们必须从n中减去1。）
.nextAll()：这将选择步骤3中找到的图像的所有以下兄弟节点。
.hide()：这会隐藏在步骤4中选择的所有兄弟姐妹。

小提琴： http://jsfiddle.net/v44LwLhr/1/

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

1 个答案: