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());
});

You can see a demo working here

这使用^= starts-with selector隐藏初始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());
});

Demo updated for that here

Answer 2

我刚使用.each()中的索引构建了id名称：

$("div[id^='content-']").hide();

$('#thumbnails').find('div').each(function(i,obj){
    $(obj).click(function(e){
      $("#foo").html($("#content-"+(i+1)).html());        
    });
});

...你也可以看到working demo here（拿那个尼克！）

Answer 3

通过类和ID加载内容

    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.4.1");

      google.setOnLoadCallback(function() {

            // THIS IS WHAT YOU NEED (CALL IT ON LOAD)
            $(function() {
                $('.thumbs').click(function() {
                    var id = this.className.split(' ')[1];
                    $('#foo').html($('#' + id).html());
                });
            });

      });
    </script>

</head>

<body>

    <div id="foo">

        00 00 00

    </div>


    <div id="thumbnails">
        <div class="thumbs content-1">Load 01</div>
        <div class="thumbs content-2">Load 02</div>
        <div class="thumbs content-3">Load 03</div>
    </div>


    <div id="content-1" style="display:none">
        01 01 01
    </div>

    <div id="content-2" style="display:none">
        02 02 02
    </div>

    <div id="content-3" style="display:none">
        03 03 03
    </div>

</body>

如果我已经正确阅读了您的帖子，请点击要将内容加载到#foo的拇指！如果这是正确的，请使用发布的示例：

每次单击带有“thumbs”类的元素时，都会运行代码

$（'。thumbs'）。click（function（）{
这将拆分被点击元素的类，并将获取第二个
的变量
var id = this.className.split（''）[1];
这将搜索id等于抓取类的元素并检索其内容，并将其发送到#foo。

$（'＃foo'）。html（$（'＃'+ id）.html（））;

请注意，诀窍是让被点击的元素具有与其对应的类名和包含所需内容的id元素。

希望这有助于你！

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

3 个答案: