1

我有以下代码；

$('[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 实例。

我怎样才能让它每次点击只插入一次？

谢谢

4

4 回答 4

1

使用:first 选择器：

$('[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);
    });
});
于 2012-10-15T16:23:24.620 回答
0

可能是因为您是基于.class.

您可以在 class 中有多个元素.model-detail-panel，因此您要克隆所有元素，而不仅仅是一个。

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

于 2012-10-15T16:19:57.080 回答
0

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

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

于 2012-10-15T16:22:19.347 回答
0

您可以通过删除类来做到这一点。如果类将被删除而不是单击事件将不起作用，或者这将只插入一次

$('[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");
    });
});
于 2012-10-15T16:24:50.937 回答