Question

很抱歉对JQuery知之甚少。我一直试着搜索这个问题大约一天左右，我搜索了这个网站的答案，但无法得到最终的解决方案。

基本上我正在使用一个非常有限的ECOM站点，它提供有限的开发功能，操作和更改元素的唯一方法是使用客户端语言。

基本上我有一个非常非常脏的html表，它有一个表类和每个产品的唯一TR ID。产品展示在他们自己的表格中。

当用户将鼠标悬停在表格上时，我想显示隐藏的div。我尝试过以下方法：

$(document).ready(function () {
    $('table.newspaper-d tr[id^=product_]').hover(function () {
        $(this).find("div.tools").show();
    }, function () {
        $(this).find("div.tools").hide();
    });
});

这在某种程度上有效，但只有在鼠标悬停时才有效。

标记HTML示例是带有类的表，每个TR都有一行唯一的product_ - （ID是contactenated），即product_134是one，product_324，product_323等等

<tbody>
    <tr><td></td></tr>
    <tr>
        <td align="center">
            <table class="newspaper-d" border="0" style="width:250px; float:left;">
                <tbody>
                    <tr class="product_13633">
                        <td>

                            KKKK 

                            <div class="tools" style="display: none;">
                                <div class="add-to-basket-product">
                                    <div class="inner-add-to-basket-product">
                                        <a href="javascript:addToCart(13633);">

                                            ADD TO CART

                                        </a>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table cellspacing="3" cellpadding="3">
                                <tbody>
                                    <tr>
                                        <td width="200">
                                            <div class="product-category-pic" align="center">
                                                <a href="/Descombes-Brouilly-VV-2011-818221/">
                                                    <img class="image-thumb" border="0" src="/product_images/16/3883/thumb-descombes-brouilly-vv-2011.jpg" title="Descombes Brouilly VV 2011" alt="Descombes Brouilly VV 2011"></img>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <table cellspacing="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height="36" align="center">


                                           PRODUCT PRODUCT PRODUCT

                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="product-category-details"></div>
                            <div class="add-to-basket-product"></div>
                        </td>
                    </tr>
                </tbody>
            </table>

谢谢你们

Answer 1

您的代码实际上可以正常工作。属性选择器可以是tr[id^=product_]或tr[id^="product_"]，它们的运行方式没有区别。我假设你的标记正在进行，这使得选择工作意外，如果你要发布你的html样本，我很乐意调整我的小提琴来反映你的内容需要。

摆弄一个工作示例：http://jsfiddle.net/autoboxer/jLnj4gas/2/

干杯， autoboxer

编辑：我已根据您发布的标记更新了我的小提琴。

Answer 2

如果我理解你的上一次评论，我会做这样的事情：

$(document).ready(function () {
    $('table.newspaper-d').hover(function () {
        $(this).find("div.tools").show();
    }, function () {
        $(this).find("div.tools").hide();
    });
});

将鼠标悬停在整个表格中，切换div的可见性。

你可以用这个小提琴来检查它：http://jsfiddle.net/benjasHu/kLko76sa/

Answer 3

你必须使用＆＃34; CLASS＆＃34;选择器代替＆＃34; ID＆＃34;选择器，因为TR包含CLASS而不是ID。

尝试下面的代码：

$(document).ready(function () {
$('table.newspaper-d tr[class^="product_"]').hover(function () {
    $(this).find("div.tools").show();
}, function () {
    $(this).find("div.tools").hide();
});
});

DEMO FIDDLE

JQUERY - 在TABLE鼠标上显示隐藏的div

3 个答案: