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插件允许用户点击任何图像并让它滚动到视图中。我正在寻找一些帮助来为此创建正确的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（）函数应用scrollTo，将id作为变量，但无法正常工作。

非常感谢任何帮助！

Answer 1

修改：重构仅调用click绑定一次并使用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/

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

1 个答案: