1

我有 ASP.NET 中继器，我正在将酒店客房绑定到它，我需要显示最多 3 个房间，并且当用户单击“更多房间”按钮/锚点时应该显示休息记录。

我已经用两个 ASP.NET 中继器解决了这个问题，我将第一个中继器与 3 个房间绑定，第二个中继器与其他房间用 div 包装（使用 jQuery 显示/隐藏 ID）。但我认为这不是一个好方法。我需要用一个 ASP.NET 中继器来完成。
我还需要使用 jquery slideToggle() API 显示和隐藏隐藏的房间

这是我使用两个中继器的代码：

<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() 显示前三个项目

要显示其余部分，请设置一个单击侦听器：

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

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

于 2013-03-06T12:55:38.110 回答
1

而不是使用两个中继器，您可以做的是在中继器上进行双循环.. 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，因为我无法从你的代码中获取 Selector 如果你不明白，请告诉我

于 2013-03-06T12:56:12.390 回答
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 Item 被绑定期间进行检查 > 索引 3 然后对其应用hide类，这将最初隐藏它。

于 2013-03-06T12:53:49.477 回答
0

最后:) 我做到了。:) 感谢@Ahmed 和@Hiren Desai 的精彩帮助:) 你的例子给了我一个用slideToggle() jQuery API解决它的方法

基本上，我使用 jquery wrapALL() API将隐藏记录包装到 DIV 中，之后我能够使用 jQuery API slideToggle(); 滑动和滑动隐藏记录；

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>

查询代码

//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 回答