jQuery - 显示基于所选项目类的ID？

Question

我的布局大致如下:

<div id="foo">

    <!-- a bunch of content -->

</div>


<div id="thumbnails">
    <div class="thumb-content1"></div>
    <div class="thumb-content2"></div>
    <div class="thumb-content3"></div>
</div>


<div id="content-1">
    <!-- some text and pictures, including large-pic1 -->
</div>

<div id="content-2">
    <!-- some text and pictures, including large-pic2 -->
</div>

<div id="content-3">
    <!-- some text and pictures, including large-pic3 -->
</div>

etc ....

在页面加载时,我想显示'foo'和'缩略图'并隐藏三个内容div.

当用户点击每个缩略图时,我想隐藏foo,并用匹配的'content-x'替换它.

我可以全面了解jQuery show,隐藏和替换(尽管如果你想在你的例子中包含它,还有奖励积分!).但是,如何从缩略图类中提取和构造适当的内容ID,然后将其传递给show hide代码？

Answer 1

根据您的标记,您可以执行以下操作:

$("[id^=content]").hide();
$("#thumbnails > div").click(function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
})????????????????;?

你可以在这里看到一个演示

这使用^=starts-with选择器隐藏初始div,点击后,用于.html()复制内容,如您所愿.

如果你有很多的这些,它是更好地使用.delegate(),其附加一个单一的事件处理程序,而不是n事件处理程序的每一个可点击的<div>.它看起来像这样:

$("[id^=content]").hide();
$("#thumbnails").delegate("div", "click", function() {
    var id = $(this).attr('class').replace('thumb-content','');
    $("#foo").html($("#content-"+id).html());
});?

演示在这里更新了