使用jQuery仅显示悬停在类别网格中的产品的div

在Magento上，我试图在悬停一个产品时，在一个新的div（show/hide onmouseover）中获得每个产品的可用属性。不幸的是，我的jQuery代码用相同的名称打开每个div。我想，我需要用jQuery（这个）来实现它，但我尝试了1000种不同的方式，但它不起作用。也许，这里有人能帮我写一个更好的代码

jQuery(function() {
    jQuery('.slideDiv').hide().data('over', false);
    jQuery('#hover').hover(function() {
      jQuery('.slideDiv').fadeIn(); 
    }, function() {
      // Check if mouse did not go over .dialog before hiding it again
      var timeOut = setTimeout(function() {
        if (!jQuery('.slideDiv').data('over')) {
          jQuery('.slideDiv').fadeOut();
          clearTimeout(timeOut);
         }
       }, 100);
    });

    // Set data for filtering on mouse events for #hover-here
    jQuery('.slideDiv').hover(function() {
      jQuery(this).data('over', true);
    }, function() {
      jQuery(this).fadeOut().data('over', false);
    });
});

PHP只打印所需的属性

<a href="#" id="hover">Custom Attributes</a>
    <div class="slideDiv">                            
<?php
$attrs  = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product);
foreach($attrs as $attr) {
    if(0 == strcmp("shoe_size", $attr['attribute_code'])) {
        $options    = $attr['values'];
        print "Größen:<br />";
        foreach($options as $option) {
            print "{$option['store_label']}<br />";
        }
    }
}
?>
</div>

---

这有点难说，但我认为你应该这样做：

$('#hover').hover(function() {
  $(this).find('.slideDiv').fadeIn(); 
}

.find

仅选择给定元素的子元素-在本例中为

$（此）

（悬停元素）

---

此外，请确保您的元素

id

s（例如

“hover”

）是唯一的。

您可以使用

$（…）

格式而不是

jQuery（…）

，这样可以节省您的键入时间。：）谢谢你的评论。非冲突模式被激活，这就是我使用jQuery（）的原因。谢谢Alex的帮助。我自己也试图改变这一点，但不幸的是，唯一的区别是，在我的第一个示例中，div只在我悬停第一个链接时出现，而在新的示例中，它在每个“悬停”链接上都会打开。这很好，但它会再次在每个项目上打开它。我只需要为我悬停的链接打开一个div。唯一ID确实是个问题（我无法更改），因为它应该被动态地用于概述中的产品。现在，我理解了唯一ID的含义。：）对不起，关于那件事。将ID更改为类。现在，每个链接都会以悬停方式打开每个div。我只需要更改它，这样悬停就会打开“child div”，即链接后面的div.：）慢慢地，我想，它最终可能会起作用：）我解决了它。因为你是我找到解决方案的原因，我将把你的帖子标记为答案。再次感谢：）

jQuery(function() {
    jQuery('.slideDivfirst, .slideDiv, .slideDivlast').hide().data('over', false);

    jQuery('.hover').hover(function() {
      jQuery(this).children('.slideDiv').fadeIn();
    }, function() {
      // Check if mouse did not go over .dialog before hiding it again
      var timeOut = setTimeout(function() {
        if (!jQuery('.slideDiv').data('over')) {
          jQuery('.slideDiv').fadeOut();
          clearTimeout(timeOut);
        }
      }, 100);
    });

    // Set data for filtering on mouse events for #hover-here
    jQuery('.slideDiv').hover(function() {
      jQuery(this).data('over', true);
    }, function() {
      jQuery(this).fadeOut().data('over', false);
    });
});

$('#hover').hover(function() {
  $(this).find('.slideDiv').fadeIn(); 
}