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>

变量$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/

Answer 2

我建议这样做：

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

使用这个 html：

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