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

});

ID を変数として取得する .each() 関数を使用して scrollTo を適用しようとしましたが、何も動作しません。

どんな助けでも大歓迎です！

4

1 に答える 1

1

編集:clickバインディングを 1 回だけ呼び出し、イベント委任を使用するようにリファクタリングされました-

$('#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 に答える