3

编辑！

事实证明，我在调用 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() 函数将 id 作为变量来应用 scrollTo，但无法正常工作。

任何帮助将不胜感激！

4

1 回答 1

1

编辑：重构为click仅调用一次绑定并使用事件委托-

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

于 2010-07-13T16:20:54.353 回答