Question

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

这是我想要实现的目标：如果代码看起来像

<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（＆＃39;＆＃39;）[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 )中的click函数，以这种方式使用它来知道哪一个被点击了：

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

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

1 个答案: