JQuery綁定在相同的元素上，唯一的行爲

我的問題很簡單。我正在與CMS合作，該網站的編輯可以在同一頁面上拖放多個小部件。JQuery綁定在相同的元素上，唯一的行爲

小工具都有完全相同的html。例如，可以有旋轉木馬，照片庫等。我已經編寫了javascript來使這些小部件相互作用，但是如何讓每個小部件獨立運行。

例如，單擊一個傳送帶上的下一個按鈕，不應該滾動頁面中的所有傳送帶。

所以我不能做這樣的事情：

function bindEvents() { 
     $('.next').on({ 
      click: function() { 
       ... 
      } 
     }); 
    }

因爲所有的部件具有相同的HTML，例如：

<div class='carousel'> 
    .... 
    <span class='next'>Next</span> 
    .... 
</div>

我真的很感激一些幫助。謝謝！

來源

2012-10-27 Nima

這個擴展如何讓喲你的小工具有一個唯一的ID嗎？ –

我無法添加唯一ID，因爲我無法控制CMS在運行時生成的內容。 – Nima

在頁面隔離重複的元素通常是通過使用小部件的包裝爲所有的代碼

$('.next').on('click', function() { 
    /* store the current widget element and make all searches from this point*/ 
    var $carousel = $(this).closest('.carousel'); 
    $carousel.find('.someClass').doSomething(); 
    $carousel.find('.anotherClass').doSomethingElse() 
});

只有相同轉盤的按鈕中的元素會受到影響的情況下，因爲它們是相當簡單的按鈕的父傳送帶內搜索僅

您可以通過檢查的附加類部件的

<div class='carousel slideshow'> 

/* within above handler code */ 
if($carousel.is('.slideshow')){ 
    /* run code specific to slideshow class of carousel only */ 
}

來源

2012-10-27 14:13:27 charlietfl

哇，比我自己的解決方案簡單得多。謝謝！ – Nima

JQuery綁定在相同的元素上，唯一的行爲

回答

相關問題