0

JLRiche の更新

以下の html 構造 (これは、div id=content_body_right 全体の構造です):

    <div id="content_body_right">
        <p class="user_text">Tim Flanagan</p><p class="date_text">02-06-2013 @ 12:00PM</p>
                <p class="message_text">Playin Augusta today. What a beautiful course!</p>
                <div id="activity_image">
                    <img src="images/activities/1/actimg.jpg" width="435" />
                </div>
                <div id="tips">
                    <div id="tip_cap_left">
                        <a href="dashboard.php?captip=tipyourcap" title="Tip Your Cap" ></a>
                    </div>
                    <div id="tip_cap_right">
                        <p class="tips_right">12 Tips of the Cap</p>
                    </div>
                </div>
                <p class="comments_label">
                    4 Comments&nbsp;&nbsp;&nbsp;
                    <a href="#" class="see_all" style="display:inline-block" title="See All Comments">see all</a>
                    <a href="#" class="collapse" style="display:none" title="Collapse Comments">collapse</a>
                </p>
                <div id="comment1">
                    <div id="comment_user_img">
                        <img src="images/defaultuserimg.jpg" width="30" height="30" />
                    </div>
                    <div id="comment_user">
                        <p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
                        <p class="message_text_comment">Nice jealous of you bro.</p>
                    </div>
                </div>
                <div class="comment2" style="display:none; clear:both; margin:0px; overflow:auto">
                    <div id="comment2_sub">
                        <div id="comment_user_img">
                            <img src="images/defaultuserimg.jpg" width="30" height="30" />
                        </div>
                        <div id="comment_user">
                            <p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
                            <p class="message_text_comment">Nice jealous of you bro.</p>
                        </div>
                    </div>
                    <div id="comment2_sub"> 
                        <div id="comment_user_img">
                            <img src="images/defaultuserimg.jpg" width="30" height="30" />
                        </div>
                        <div id="comment_user">
                            <p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
                            <p class="message_text_comment">Nice jealous of you bro.</p>
                        </div>
                    </div>
                    <div id="comment2_sub">                  
                        <div id="comment_user_img">
                            <img src="images/defaultuserimg.jpg" width="30" height="30" />
                        </div>
                        <div id="comment_user">
                            <p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
                            <p class="message_text_comment">Nice jealous of you bro.</p>
                        </div>
                    </div>
                </div>
    </div>

その上下にたくさんあるので、さらに構造が必要な場合はお知らせください。お役に立てれば。本当にありがとうございました！

更新を終了

こんばんは、

X 量の db 結果ごとに、X 量の jquery スクリプトを動的に作成する必要があります。X は数値が異なることを意味します。これは一種のフォーラム タイプのもので、元の投稿と 1 つの返信が表示され、[すべて表示] または [すべて折りたたむ] をクリックして残りを表示または折りたたむことができます。通常の $i 変数を使用して foreach ループ内で html 要素をインクリメントしているため、それぞれの jquery クリック関数も出力する必要があります。

作成するために PHP が必要なコードは以下のとおりです。

$jquery .= "$('#see_all$i').click(function () {
    $('#comment2_$i').slideDown('fast');
    $('#collapse$i').css('display', 'inline-block');
    $('#see_all$i').css('display', 'none');
    return false;
});

$('#collapse$i').click(function () {
    $('#comment2_$i').slideUp('fast');
    $('#collapse$i').css('display', 'none');
    $('#see_all$i').css('display', 'inline-block');
    return false;
})";

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

ありがとう

4

2 に答える 2

2

同じjQueryコードのわずかに異なる複数のコピーを生成することは、あまり良い設計ではありません. 次のように、jQuery コードをページに 1 回だけ配置する必要があるように記述する必要があります。

$('.see_all').click(function(){
     var thisItem = $(this);
     thisItem.parent().find('.comment').slideDown('fast');
     thisItem.parent().find('.collapse').css('display','inline-block');
     thisItem.css('display','none');
     return false;
}); 

$('.collapse').click(function(){
     var thisItem = $(this);
     thisItem.parent().find('.comment').slideUp('fast');
     thisItem.css('display','none');
     thisItem.parent().find('.see_all').css('display','inline-block');
     return false;
})";

もちろん、これにはcollapse、see_all、およびcommentクラスを関連する HTML 要素に追加することも含まれます。

于 2013-02-09T05:39:27.907 に答える
0

html :

<div class="seeall" data-elid="1">...</div>
...
<div class="collapse" data-elid="1">...</div>
...

js:

var $bdy=$(document.body)
$bdy.on("click",".seeall",function(e) {
      var el=$(this).css('display','none').data("elid");
      $('#comment2_'+el).slideDown('fast');
      $('.collapse[data-elid="'+el+'"]').css('display','inline-block');
     })
     .on("click",".collapse", function(e) {
               //same same
     });
于 2013-02-09T05:35:43.333 に答える