Question

我正在尝试创建一个简单的库，但无法弄清楚我的jQuery语法有什么问题。

当用户点击缩略图（前三个列表项之一）时，我想clone()图片和标题，并将其粘贴到li.expand（全尺寸图片）。< / p>

我的jQuery函数的前两行正在工作（即“选定”类）但最后两行似乎没有做任何事情。我使用$(this)错了吗？

HTML

<ul class="gallery2">
        <li>
            <img src="img/1.jpg" />
            <p>Caption 1</p>
        </li>
        <li>
            <img src="img/2.jpg" />
            <p>Caption 2</p>
        </li>
        <li>
            <img src="img/3.jpg" />
            <p>Caption 3</p>
        </li>

        <li class="expand">
            <!-- This space will be filled with whatever thumbnail is selected -->
        </li>
</ul>

的jQuery

$(".gallery2 li").click(function () {
    $(".gallery2 li").removeClass("selected");
    $(this).addClass("selected");
    $(".gallery2 li.expand").html().remove();
    $(this).html().clone().appendTo(".gallery2 li.expand");
});

Answer 1

html()返回一个字符串，而不是jQuery对象。也许你的意思是使用children()？此外，您可以使用empty()，而不是使用.children().remove()。随着这些变化：

$(".gallery2 li").click(function () {
    $(".gallery2 li").removeClass("selected");
    $(this).addClass("selected");
    $(".gallery2 li.expand").empty();
    $(this).children().clone().appendTo(".gallery2 li.expand");
});

您也可以考虑使用siblings()来选择兄弟元素：

$(".gallery2 li").click(function () {
    var me = $(this);
    me.siblings().removeClass("selected");
    me.addClass('selected');
    me.siblings('.expand').empty().append(me.children().clone());
});

如果我们要解决所有问题，为什么不把它变成插件来使它更通用呢？

$.fn.gallerize = function() {
    this.on('click', 'li', function() {
        var me = $(this);
        me.siblings().removeClass('selected');
        me.addClass('selected');
        me.siblings('.expand').empty().append(me.children().clone());
    });
};

然后制作一个画廊就这么简单了：

$('.gallery2').gallerize();

试试on JSFiddle。

jQuery语法帮助 - 幻灯片库代码

1 个答案: