时间戳

首页 > 解决方案 > 如何在中继器中悬停另一个 div 时将类应用于中继器中的 div

jquery - 如何在中继器中悬停另一个 div 时将类应用于中继器中的 div

问题描述

我有一个中继器，其中包含以下内容：

<div id="undercover" class="Price">
<span class="Location">UNDERCOVER</span><br />
<asp:label runat="server" ID="lblUndercover" Text="Price" CssClass="PriceLabel" /></div>

...中继器中的其他一些东西，然后

<div id="containerUndercover">
<div class="BookButton">
<asp:LinkButton ID="btnBookUndercover" runat="server" CommandName="Undercover">BOOK</asp:LinkButton>
</div></div>

当“containerUndercover”div 悬停时，我需要为“undercover”div 应用一个额外的类。

当 div 不在中继器中时，这相对简单，使用以下 jQuery：

<script type="text/javascript">
$(function () {
    $('#containerUndercover').hover(function () {
        $('#undercover').addClass('PriceHover');
    }, function () {
        $('#undercover').removeClass('PriceHover');
    });
});

但是，当然，我不能将此应用于每个“卧底”和“containerUndercover”div，因为它们是重复的。我知道问题是什么，但我找不到解决方法。

我尝试添加runat="server"到 div，然后尝试使用（例如）<%= containerUndercover.ClientID %> 获取他们的 id，但这只会引发错误并显示“containerUndercover 不存在”。

有没有办法做到这一点？

标签： jqueryasp.netrepeater

解决方案

稍微修改页面上的定位控件，但我有一些工作。这意味着悬停功能适用于整个 'ButtonLeft' div 而不仅仅是按钮区域，但我认为我的客户会对此表示满意。

<div id="buttonLeft" class="ButtonLeft">
<asp:Panel runat="server" ID="pnlOutdoorPrice">
    <div id="outdoor" class="Price outdoor">
        <span class="Location">OUTDOOR</span><br />
        <asp:label runat="server" ID="lblOutdoor" Text="Price" CssClass="PriceLabel" />
    </div>
    <div id="containerOutdoor">
        <asp:Panel runat="server" ID="pnlOutdoorBookButton" Visible='<%# customFunctions.CheckinDateWithinSpecified(Convert.ToInt32(Eval("ProviderID")), this.txtCheckIn.Text) && customFunctions.CheckoutDateWithinSpecified(Convert.ToInt32(Eval("ProviderID")), this.txtCheckOut.Text)  %>'>
            <div class="BookButton">
                <asp:LinkButton ID="btnBookOutdoor" runat="server" CommandName="Outdoor">BOOK</asp:LinkButton>
            </div>
        </asp:Panel>
    </div>
</asp:Panel></div>

$(function () {
    $('.ButtonLeft').hover(function () {
        $(this).find('.outdoor').addClass('PriceHover');
    }, function () {
        $(this).find('.outdoor').removeClass('PriceHover');
    });
});

推荐阅读