1

.show()これらすべてのライトボックス jquery プラグインを使用するのではなく、製品リンクの「ズーム」ボタンをクリックするたびに独自の div を作成しない理由がわかりませんでした。(各製品リンクとそのズーム ボタンは、データベースから動的に読み込まれます)。

私のウェブサイトのユーザーはズームをクリックするだけで、製品の正面のクローズアップ画像がポップアップ表示されます。問題は、ユーザーが製品の裏側を「ひっくり返して」見られるようにしたいということです。(これを行うには、画像の src を変更するだけ$('#closeup')です。しかし、ここで問題が発生します。通常、最初のフリップは問題ありません。その後、連続する製品が拡大されるたびに、フリップが増加しているように見えます!

したがって、最初の製品では、ユーザーが「フリップ」をクリックします。つまり、前から後ろに 1 回フリップします。わかった。2 番目の製品では、ユーザーが「フリップ」をクリックします。1 回目は前から後ろにフリップし、もう 1 回は後ろから前にフリップするため、ユーザーは前の画像に戻ります。3 番目の製品、ユーザーが「フリップ」をクリック、3 回フリップ! どうしたの？

試してみevent.stopPropagation()ましたが、違いはありませんでした。

私のコードは次のとおりです。

$('.zoom').live('click', function(e){
    paths = $(this).attr('data-title').split(";"); // data-title is in the "form front_path;back_path"
            // paths[0] now holds path to front image, paths[1] holds path to back image
    $('#closeup').attr('src',paths[0]);

            $('.flipview').click(function(e){
            if($('#closeup').attr('src')==paths[0]){
                       e.stopPropagation() ; 
                       alert('switching from front  '+$('#closeup').attr('src')+' - to back'); 
                       $('#closeup').attr('src', paths[1]);
                    }else{
                       e.stopPropagation(); 
                       alert('switching from back '+$('#closeup').attr('src')+' to front'); 
                       $('#closeup').attr('src', paths[0]) 
                   }
        });
});

基本的に、製品がズームインされるたびに、.flipviewクラスに新しいカスタム アクションが割り当てられます。

単一の製品のデータベースから読み込まれた HTML は次のとおりです。

<li> <img src="../designs_staff/product0/template0/s16_1350300633/0.jpg">
     <a id="s16_1350300633" class="zoom" title="Zoom in" data-title="../designs_staff/product0/template0/s16_1350300633/0.jpg;../designs_staff/product0/template0/s16_1350300633/1.jpg" href="#">  </a>
</li>

そして、製品の拡大とともにポップアップする DIV の HTML は次のとおりです。

<div id='popup'>
<a href='#' class='flipview'>Flip</a> | <a href='#' id='closepopup'>Close</a>
<br /><img id='closeup' />
</div>
4

1 に答える 1

1

わかった。問題は、ズームインする製品がたくさんあるにもかかわらず、1 つのポップアップがすべての製品に使用されていたことです。そのため、拡大されたすべてのボタンに対して、新しいクリック機能が に追加されました$('.flipview')。そのため、ズームごとに、各フリップにトグルが 1 つ追加されました。

修正は、画像ソースを切り替える前に既存のクリック イベント ハンドラーを削除するだけでした。

    $('.flipview').unbind('click');
于 2012-11-04T12:23:57.760 に答える