1

ASP.NET Repeater があり、ホテルの部屋をバインドしています。最大 3 つの部屋を表示する必要があり、ユーザーが [その他の部屋] ボタン/アンカーをクリックすると残りのレコードが表示されるはずです。

私は2つのASP.NETリピーターでこの問題を解決しました.1番目のリピーターを3つの部屋にバインドし、2番目のリピーターを他の部屋にバインドし、div（jQueryを使用してIDで表示/非表示）でラップします。しかし、これは良いアプローチではないと思います。1 つの ASP.NET リピーターでそれを行う必要があります。
また、jquery slideToggle() API を使用して非表示の部屋を表示および非表示にする必要があります

2つのリピーターを使用したコードは次のとおりです。

<asp:Repeater ID="RPRoomsWithThreeRecords" runat="server">
    <ItemTemplate>
        <div class="search_hotel_book_now">
            <div class="search_hotel_book_left">
                <p>Executive Room with bed and breakfast</p>
            </div>
            <div class="search_hotel_book_right">
                <a href="#">Book Now</a> <span>2 500,-</span>
                <p>NOK</p>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

<div id="hideShowDiv">   
    <asp:Repeater ID="RPRoomsOtherRecords" runat="server">
        <ItemTemplate>
            <div class="search_hotel_book_now">
                <div class="search_hotel_book_left">
                    <p> Executive Room with bed and breakfast</p>
                </div>
                <div class="search_hotel_book_right">
                    <a href="#">Book Now</a> <span>2 500,-</span>
                    <p> NOK</p>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

参考までにスクリーンショットも貼っておきます。前もって感謝します。 ここに画像の説明を入力

4

4 に答える 4

2

Jquery :lt() セレクターを使用できます。

$('.search_hotel_book_now:lt(3)').each(function(){
    $(this).show();
});

デフォルトでアイテムを非表示にし、:lt() を使用して最初の 3 つのアイテムを表示します。

残りを表示するには、クリック リスナーを設定します。

$('#more-items').click(function() {
    $('.search_hotel_book_now').show();
});

http://api.jquery.com/lt-selector/

于 2013-03-06T12:55:38.110 に答える
1

2 台のリピーターを使用する代わりに、リピーターでのダブル ループが可能です。 1) 外部ループは各ホテルで機能します 2) 内部ループは各部屋で機能します

例えば

$('#Selector for each hotel').each(function(e,res){
    $(res).children('selector for each rooms').each(function(e1,res1){
        if(parseInt(e1)>=3)
        {
            $(this).hide(); or .css('display','none');
        }
    });
    $(this).children('selector for more button').click(function(){
        $(this).parents('selector to the top parent of each rooms').children('selector for each rooms').show();
    });
});

コードからセレクターを取得できなかったので、jQuery が得意だと思います。取得できない場合はお知らせください。

于 2013-03-06T12:56:12.390 に答える
0

最後に:)私はそれをしました。:) @Ahmed と @Hiren Desai のすばらしい助けに感謝します :) あなたの例は、slideToggle() jQuery APIで解決する方法を教えてくれます

基本的に、jquery wrapALL() APIを使用して非表示のレコードを DIV にラップし、その後、jQuery API を使用して非表示のレコードをスライドアップおよびスライドダウンすることができました

ASP.NET コード 

<asp:Repeater runat="server" ID="RPHotels" OnItemDataBound="RPHotels_ItemDataBound">
<ItemTemplate>
    <div class="search_hotel_div">
        <div class="search_hotel_right">

            <asp:Repeater runat="server" ID="RPRooms" OnItemDataBound="RPRooms_ItemDataBound">
                <ItemTemplate>
                    <div class="search_hotel_book_now">
                        <div class="search_hotel_book_left">
                            <p>
                                <asp:Literal ID="lblRoomType" runat="server" Text="Double Ensuite Double Bed Tv Telephone"></asp:Literal>
                            </p>
                            </div>
                            <div class="search_hotel_book_right">
                                <a href="#">Book Now</a> <span>
                                    <asp:Literal ID="lblRoomPrice" runat="server" Text="800,-"></asp:Literal></span>
                            </div>
                          </div>
                </ItemTemplate>
            </asp:Repeater>

            <div class="more_rooms srchbox">
                <a href="#" class="moreRooms">more rooms</a></div>
        </div>
    </div>
    <hr style="border: none; border-top: #d9d9d9 solid 1px; margin-top: 10px;" />
</ItemTemplate>

Jクエリコード

//Loop will work on each Hotel 
        $(".search_hotel_div").each(function (e) {
                //Loop will work on each Hotel's Room
                //Select rooms from bottom to 4th room using jQquery slice()
                //and wrap selected items with a div with class name .divSlideUpDown: 
                $(".search_hotel_book_now", this).slice(3).wrapAll("<div class='divSlideUpDown' style='display:none;' />");

                $(this).find('.moreRooms').click(function () {

                    //my Toggle work here :)
                    $(this).parents().siblings(".divSlideUpDown").slideToggle(); 
                    $(this).text($(this).text() == "more rooms" ? "hide rooms" : "more rooms") 
                    return false;
                });
        });
于 2013-03-07T13:19:45.113 に答える
0

このようにできます

<style type="text/css">
  .search_hotel_book_now
  {
    border: 1px solid black;
    display: block;
  }
  .hide
  {
    display: none;
  }
</style>

<asp:Repeater runat="server" ID="rptr">
  <ItemTemplate>
    <div class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'>
        <div class="search_hotel_book_left">
          <p>
            Executive Room with bed and breakfast</p>
         </div>
         <div class="search_hotel_book_right">
            <a href="#">Book Now</a> <span>2 500,-</span>
            <p>NOK</p>
         </div>
            <%# Eval("Your_Field")%>
         </div>
  </ItemTemplate>
  <FooterTemplate>
      <div id="viewMore">  
            View More</div>
  </FooterTemplate>
</asp:Repeater>

<script type="text/javascript">
    $("#viewMore").click(function () {
        $(".hide").removeClass("hide").addClass("search_hotel_book_now");
        $("#viewMore").hide();
    });
</script>

ここでのメインは

class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'

私が行ったことは、バインドされているIDアイテムがバインドされているデータバインディング中のチェックです>インデックス3hideであり、最初に非表示にするクラスをそれに適用します。

于 2013-03-06T12:53:49.477 に答える