0

假设我们的数据库中有一些产品及其详细信息。我希望产品名称出现在页面上而不显示其详细信息。如果用户将鼠标悬停在其中一种产品上，则该特定产品的详细信息会向下滑动。我正在使用中继器从数据库中检索和显示产品数据。

这是我的代码：

    //this is the html
    <div>
    <asp:Repeater ID="myRepeater" runat="server">
        <ItemTemplate>
            <div class="productTiltle">
                <%#Eval("producttitle") %> <br />
            </div>
            <div class="productDetail">
                <%#Eval("productdetail") %>
            </div>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </asp:Repeater>

    //this is the css
    .productTitle
    {
    background-color:#f00;
    font-size:x-large;
    text-align:center;
    }
    .productDetail
    {
    background-color:#ff6a00;
    font-size:large;
    }

    //this is the JQuery
    $(document).ready(function () {
        $(".productDetail").hide();
        $(".productTiltle").hover(function () {
            $(".productDetail").slideDown('normal');
        }, function () {
            $(".productDetail").slideUp('normal');
        }); 
    });

我需要中继器来设置我从数据库中检索到的每一行产品的样式。但问题是（正如预期的那样），当我使用 jQuery 对类做某事时，.productDetail该类的每个元素都会受到影响（在这种情况下，是整个页面）。但我需要一些方法来使用 jQuery 对特定产品做一些事情。

例如，如果我们有产品 1 到 100，其中产品 1、产品 2 productTitles、...、产品 100；并且用户将鼠标悬停在产品 23 上，则仅显示产品 23 的详细信息

我怎样才能做到这一点？

4

5 回答 5

1

你可以这样设置。

.productDetail
    {
       display: none;
       background-color:#ff6a00;
       font-size:large;
    }

对于 jQuery

$('.productTiltle').mouseover(function() {
    $(this).next('.productDetail').slideDown('normal');
  }).mouseout(function(){
    $(this).next('.productDetail').slideUp('normal');
  });
于 2013-07-09T07:24:52.553 回答
0

您是否尝试过 jquery 隐藏和显示功能？

于 2013-07-09T07:29:11.483 回答
0

提供您的详细 div 数据属性，例如：

<div class="productTiltle" data-productid="<%# Eval("ProductID") %>">
    <%#Eval("producttitle") %> <br />
</div>

<div class="productDetail" data-productid="<%# Eval("ProductID") %>">
    <%#Eval("productdetail") %>
</div>

然后在jQuery中

$(document).ready(function () {
  $('.productTitle').click(function (e) {
      e.preventDefault();
      var productID = $(this).data('productid');
      $('.productDetail [data-customerID="' + productID + '"]').slideDown();
  });
});

注意：我已将拼写错误的 productTiltle 更改为 productTitle

于 2013-07-09T07:42:05.143 回答
0

希望这个 jQuery 对你有帮助

<script type="text/javascript">
        // this is the jQuery
        $(document).ready(function () {
            $(".productTiltle").each(function (index) {
                $(this).hover(function () {
                    console.log("slidd");
                    $(".productDetail").eq(index).slideDown('normal');
                }, function () {
                    console.log("slidu");
                    $(".productDetail").eq(index).slideUp('normal');
                });
            });
        });
    </script>
于 2013-07-09T07:42:14.243 回答
0

对于这件事，没有什么比好的旧 CSS 更好的了。

请记住，页面中的 JS 越少越好。需要更少的维护和更少的头痛！而且......在这个星球上，jQuery 没有任何办法可以比编码良好的 CSS 表现得更好。

HTML：

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
      <div class="wrapper">
        <div class="productTiltle">
            <%#Eval("producttitle") %> <br />
        </div>
        <div class="productDetail">
            <%#Eval("productdetail") %>
        </div>
       </div> 
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:Repeater>

CSS：

.productTitle
{
  background-color:#f00;
  font-size:x-large;
  text-align:center;
}
.productDetail
{
      background-color:#ff6a00;
  font-size:large;
  display: none;
}

.wrapper:hover .productDetail
{
  display: block;
}
于 2013-07-09T07:55:09.887 回答