Question

如果单击this page上的单元格，则会加载较大版本的图像。我正试图达到同样的效果。

首先，我知道"appear" <div>是多余的 - 是否有一种利用$(this)和appendTo();代替的好方法？

最终我的想法是获取被点击的div中包含的锚点的id并将其附加到单元格。我该怎么办......？

Answer 1

你可以这样做：

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).append('<div>' + $(this).find('a:first').attr('id') + '</div>');
    });
});

JS Fiddle demo

修改后只显示一个 id（其他人在显示最新内容之前被删除）：

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        $(this).closest('.container').find('.appended').remove();
        $(this).append('<div class="appended">' + $(this).find('a:first').attr('id') + '</div>');
    });
});

JS Fiddle demo

顺便说一句，第一次它没有引起我的注意，但是多个元素共享相同的id ，您的HTML（x）HTML无效：id < em>必须 在文档中是唯一的（引用：W3.org）。

参考文献：

Answer 2

如果您将ID属性更改为appear元素的类，则可以执行以下操作：

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        var $this = $(this);//cache the $(this) selector since it will be used more than once
        $this.children('.appear').html('item id: ' + $this.children('a').attr('id')).fadeToggle('slow');
    });
});

演示：http://jsfiddle.net/8mYW9/7/

顺便说一下，HTML文档中不能有多个具有相同ID的元素。

Answer 3

尝试使用类选择器。您有重复的ID：

$(document).ready(function() {
    $('.appear').hide();
    $('.links').click(function() {
        $(this).find(".appear").fadeToggle('slow', function() {
            $(this).html('item id:')
        });
    });
});

http://jsfiddle.net/8mYW9/

jQuery：获取内容/ innerhtml onclick

3 个答案: