Question

我有以下代码;

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});

克隆部分运行良好，但我只希望'modelPanel'在DOM中出现一次（每次单击[class * =“time-span”]）。目前它在每个'时间轴'类之后被多次插入，导致插入div的很多实例。

如何每次点击只插入一次？

由于

Answer 1

使用:first selector：

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline:first', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);
    });
});

Answer 2

可能是因为您基于.class进行克隆。

您可以在课程.model-detail-panel中添加多个元素，因此您将克隆所有这些元素，而不仅仅是一个元素。

尝试基于其他属性进行克隆。

Answer 3

您可能需要比.timeline之后的插入更具体，因为jQuery将对您在页面上找到的insertAfter类的每个元素执行.timeline。

尝试使用仅在一个地方找到的选择器。

Answer 4

你可以通过删除类来实现这一点。如果删除了类而不是click事件将无法工作，或者这只会被输入一次

$('[class*="time-span"]').on('click', function () {
    var modelPanel = $('.model-detail-panel');
    modelPanel.clone().insertAfter('.timeline', this).slideToggle('fast', function () {
        console.log(this);
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 500);

 $(this).removeClass("time-span");
    });
});

将div克隆到DOM中一次

4 个答案: