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>

jquery显示div在数据库中的php cicle中悬停

2 个答案: