javascript - jquery 在来自数据库的 php cicle 中悬停时显示 div

Question

我在生成产品列表时遇到了 div id 的问题。我在文本链接上使用淡入淡出和隐藏效果

部分代码:

JavaScript

$('.theLink').hover(
    function () {
        $('.theDiv').fadeIn();
    },
    function () {
        $('.theDiv').hide();
    });

CSS

.theDiv {
    display: none;
    margin-top:-7px;
    background-color:#fff;
    width: 148px;
    line-height:100%;
    border:1px solid #c3c3c3;
    background:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    position: relative;
    padding: 10px;
}

html

<div class="theLink">Compatibilit&agrave;</div>    
<div class="theDiv">' . $something . '</div>

variabile $something 正常工作并显示产品列表中每个元素的正确详细信息当我浏览 theLink 时，它会在列表的每个元素中打开 theDiv 而不是仅在当前元素中打开。

我希望已经清楚了。在此先感谢您的帮助。

添加:

我将添加已实现的代码，让您了解零件的放置位置

<div class="content">
    <div class="bordobasso">
        <div class="theLink">
            <div class="compatibilita">Compatibilit&agrave;</div>
        </div>
        <div class="dettagliprodotto">Acquista</div>
    </div>
</div><div class="theDiv">' . $new_products['products_id'] . '</div>

content 已经有另一个 jquery 函数来扩展列表中的元素并放置一些 css

Answer 1

测试这个:

$('.theLink').hover(
    function () {
        $(this).closest('.content').next('.theDiv').fadeIn();
    },
    function () {
        $(this).closest('.content').next('.theDiv').hide();
});

“this”变量指示 jquery 在哪个元素中查找“theDiv”元素

示例:http://jsfiddle.net/k5hs8/