如何将 class 应用于转发器中的另一个 div 悬停在转发器中的 div

Question

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

<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 应用额外的 class。

当 div 不在中继器中时，这相对简单，具有以下 jQuery:

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

但是，当然，我无法将其应用于每个 "undercover" 和 "containerUndercover" div，因为它们是重复的.我知道问题出在哪里，但我找不到解决方法。

我尝试将 runat="server" 添加到 div，然后尝试使用（例如）<%= containerUndercover.ClientID %> 获取他们的 ID，但这只会抛出一个错误并说 "containerUndercover doesn't exist".

有办法实现吗？

Answer 1

您可以使用其他方式 select 您悬停的元素，id 不是唯一的选择。例如css class

<div id="undercover" class="Price">
<span class="Location">UNDERCOVER</span><br />
<asp:label runat="server" ID="lblUndercover" Text="Price" CssClass="PriceLabel" /></div>
<!-- ... some other stuff in the repeater, and then -->
<div id="containerUndercover" class="container-undercover">
<div class="BookButton">
<asp:LinkButton ID="btnBookUndercover" runat="server" CommandName="Undercover">BOOK</asp:LinkButton>
</div></div>



<script type="text/javascript">
$(function () {
    $('.container-undercover').hover(function (e) {
        $(e.target).parent('.Price').addClass('PriceHover');
    }, function (e) {
        $(e.target).parent('.Price').removeClass('PriceHover');
    });
});

Answer 2

对页面上的定位控件稍作修改，但我有一些工作。这意味着悬停功能应用于整个 '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');
    });
});

如何将 class 应用于转发器中的另一个 div 悬停在转发器中的 div

How to apply class to a div in a repeater on hover of another div in the repeater

asp.net

jquery

repeater