將scrollTo應用於自動生成的鏈接

原來我在調用scrollto時出現了太多的撇號。工作代碼如下：

$('.miniImage').click(function() { 

var $th = $(this); 
    var id = $th.attr('id'); 

    $.scrollTo("#" + id + "Image", 1000, {offset: {top:96, left:-636} }); 

});

感謝您的幫助！

我正在製作一個藝術家的組合網站，希望以橫向風格顯示作品（因此下面的代碼中的表格）。這個想法是顯示每個圖像（ol #thumbnails）和右側圖像的縮略圖。

我想使用scrollTo插件來允許用戶點擊任何圖像並讓它滾動到視圖中。我正在尋找一些幫助，爲此創建正確的jQuery。

本質上，我可以使它工作，如果我硬編碼jQuery中的每個鏈接，但這是不太理想的CMS CMS網站whicg將不斷更新。

任何人都可以幫助一些代碼，將適用於每個縮略圖鏈接？

我有以下代碼：

 <div id="content"> 

    <ol id="thumbnails"> 

     <li class="mini"><a class="miniImage" id="horseOne"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseTwo"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseThree"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseFour"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseFive"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseSix"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseSeven"><img src="media/images/mini.jpg" alt="" /></a></li> 
     <li class="mini"><a class="miniImage" id="horseEight"><img src="media/images/mini.jpg" alt="" /></a></li> 

    </ol> 

    <div id="contentRight"> 

     <table id="work"> 

      <tr> 

       <td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 
       <td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td> 

      </tr> 

     </table> 

    </div> 

</div>

我現在的jQuery是：

$('.miniImage').click(function() { 

    var $th = $(this); 
    var id = $th.attr('id'); 

    $.scrollTo('"#" + id + "Image"', 1000, {offset: {top:96, left:-636} }); 

});

我嘗試使用。每（）函數拉動的ID作爲變量來應用scrollTo，但不能得到任何工作。

任何幫助將不勝感激！

來源

2010-07-13 DanC

這將是有益的，如果你能後你有什麼在你的js至今。 – HurnsMobile 2010-07-13 15:57:13

好點！編輯！ – DanC 2010-07-13 16:01:06

這可能會起作用，但它仍然有點草率，因爲您在同一頁面上多次綁定點擊處理程序。閱讀我的回答，並閱讀事件代表團，以獲得更清潔/更快的解決方案。 – HurnsMobile 2010-07-13 17:15:06

編輯：重構打電話給你click結合只有一次，使用event delegation - 上的jsfiddle

$('#thumbnails').bind('click', function(e){ 

    var target = e.target, // e.target grabs the node that triggered the event.  
     $target = $(target); // wraps the node in a jQuery object 
    var id = target.id; 

    if (target.nodeName === 'A') { 
     $.scrollTo('#'+ id + 'Image', 1000, {offset: {top:96, left:-636} }); 
     console.log($('#' + id + 'Image')) // for debugging in firebug 
    } 


});

工作的例子 - http://jsfiddle.net/UB4wC/2/

來源

2010-07-13 16:20:54 HurnsMobile

將scrollTo應用於自動生成的鏈接

回答

相關問題