1

5つのリンクがあるページがあります。各リンクは、2つの画像（ユーザーはこれらを切り替えることができます）と段落を含むライトボックス（prettyphotoを使用）を開きます。

2つの画像を切り替える簡単なJqueryスクリプトがあります。

jsfiddleを参照してください。

$(document).ready(function() {
  $('a.unactive').live('click', function(){
    $('a.button').toggleClass('unactive');
    $('div.show').toggle('blind','',500);
    console.log('clicked');
});

});​

この関数は正常に機能します。この問題は、ユーザーがライトボックス内の画像を切り替えたときに発生し、ライトボックスを閉じて新しい画像を開くと、両方の画像が表示されます。ここで問題の例を参照してください： jsfiddle。

つまり、ページ上のライトボックスを切り替えることができず、このトグル機能を正しく使用できません。ページを更新せずに、1つのライトボックスで2つの画像を切り替えることしかできません。

私の質問は、ユーザーがページ上のさまざまなライトボックスを開いたり閉じたりしたときに機能するように、このJquery関数をどのように変更できるかということです。使用できるリセットはありますか、それともHTML構造に変更を加える必要がありますか？または、画像を切り替える別の方法はありますか？

どうもありがとう。

4

2 に答える 2

1

この問題はこのインラインスタイルに関連していると思います。削除してみてください。

   <div id="thediv" style="display:none;">
于 2012-12-18T17:39:48.093 に答える
1

申し訳ありませんが、これまでに導き出された推論に同意しません。prettyphotoにバグがあると思います。表示/非表示にすると、新しいコンテナが作成され、そこにコードがコピーされます。コピー中に、css display：noneプロパティが失われます。

実際、常に2つの要素（2つのリンクまたは2つのdiv）で作業していると思う場合、4.2つのオリジナルと2つのクローンで作業しています。

簡単な回避策は、クローンでのみ機能することです。

$(document).ready(function() {
    $('a.button.unactive', "div.pp_content_container").live('click', function() {
        $('a.button', "div.pp_content_container").toggleClass('unactive');
        $('div.show', "div.pp_content_container").toggle('blind','',500);
        console.log('clicked');
    });
});​

それが機能していることを確認してください：http：//jsfiddle.net/HU8zx/114/

于 2012-12-18T18:25:10.487 に答える