具有可变变量的函数，取决于类

Question

所以，首先是一些背景知识。 我有 9 种类型的房间，它们显示为带有名称的缩略图。我想要做的是点击“附加信息” - 房间消失，所选房间类型的扩展版本将出现描述和更大的图片。此外，还可以在展开视图中进行下一个和上一个。我对这个扩展和上一个/下一个没有问题。但是！

这就是我想要实现的目标：如果代码看起来差不多

<ul id="room_holder">
 <li><div class="room 1">Additional Info</div></li>
 <li><div class="room 2">Additional Info</div></li>

等等…… 可扩展区域如下所示：

<div id="expandable">
 <div id="picture">Blah-blah-blah, some description, etc</div>
</div>

所以，基本上，我想不通的是如何在按下相应的缩略图时显示所需的幻灯片。我知道我可以使用 .addClass 方法，并为每个数字 (1-9) 复制代码 9 次。但我相信，如果我有某种函数，它会紧凑 9 倍，它通过使用 .split(' ')[1] 获取第二个类名（数字），然后将其用作部分变量的一部分这将打开相应的可展开视图。所以，我的问题是：我该怎么做？我是 javascript 的新手，但请尝试在旅途中学习！

哦，我一直在尝试处理的代码笔是： http://codepen.io/godban/pen/QbZmxz

Answer 1

首先，您应该使用 data-* 属性而不是类（HTML5 中的新功能）data attributes, w3school：

<ul id="room_holder">
 <li><div class="room" data-room="1">Additional Info</div></li>
 <li><div class="room" data-room="2">Additional Info</div></li>

然后，使用 jQuery .click( handler ) 中的点击功能，这样就可以知道哪个被点击了：

$(".room").click(function(event){
    var target = event.currentTarget;
    var room = $(target).data("room");
    alert(room);
});