jquery - 将scrollTo应用于自动生成的链接

Question

编辑!

结果我在调用scrollto 时出现了太多撇号。工作代码如下:

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

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

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

});

感谢您的帮助!

我正在为一位艺术家制作一个作品集网站，他希望作品以水平样式显示(因此下面代码中的表格)。这个想法是显示每个图像的缩略图(ol #thumbnails)和右侧的图像。

我想使用scrollTo插件来允许用户单击任何图像并将其滚动到 View 中。我正在寻找一些帮助来为此创建正确的 jquery。

本质上，如果我对 jQuery 中的每个链接进行硬编码，我就可以让它工作，但这对于 CMS 驱动的网站来说不太理想，因为它会不断更新。

任何人都可以帮忙编写一些适用于每个缩略图链接的代码吗？

我有以下代码:

        <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} });

});

我尝试使用 .each() 函数将 id 作为变量来应用scrollTo，但无法让任何东西起作用。

任何帮助将不胜感激!

Answer 1

编辑:重构为仅调用 click 绑定(bind)一次并使用 event delegation -

$('#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
    }


});

jsFiddle 上的工作示例 - http://jsfiddle.net/UB4wC/2/