克隆div進入DOM一次

我有以下代碼;克隆div進入DOM一次

$('[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（每次[*類=「時間跨度」]點擊）出現一次。目前它在每個'時間線'類之後被插入多次，導致插入了相當多的div實例。

我怎樣才能得到這個插入只需點擊一次？

感謝

來源

2012-10-15 webworker

使用:firstselector：

$('[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-15 16:23:24

這增加了一個'modelPanel'的實例，但我有多個'時間線'類。點擊第三個將'modelPanel'添加到第一個。我怎樣才能解決這個問題？ – webworker

可能是因爲你是基於.class克隆。

你可以有幾個元素與類.model-detail-panel，所以你克隆所有的人，而不僅僅是一個。

嘗試基於其他屬性的克隆。

來源

2012-10-15 16:19:57 RASG

您可能需要比在.timeline之後插入更具體，因爲jQuery將對您網頁上找到的類爲.timeline的每個元素執行insertAfter。

嘗試使用僅在一處找到的選擇器。

來源

2012-10-15 16:22:19 BadHorsie

不幸的是我不沒有獨特的選擇器。標記本質上是同一類，'時間線'一遍又一遍地重複着。我只想添加div'模型 - 細節面板'一次，但每次點擊'時間跨度'。 – webworker

您可以通過刪除class.If類這樣做會刪除比單擊事件將無法正常工作或這將instered只有一次

$('[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-15 16:24:50 StaticVariable

克隆div進入DOM一次

回答

相關問題