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

Question

在 Magento 上，我试图在悬停产品后立即在新的 div 中获取每个产品的可用属性（在鼠标悬停时显示/隐藏）。不幸的是，我的 jQuery 代码会打开每个同名的 div。我想，我需要用 jQuery(this) 来做，但我尝试了 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>

我将脚本添加到 [新链接] http://jsfiddle.net/xsxfr/47/，因此您可以在那里看到，它现在不能像这样工作:(。

编辑：我现在将代码更改为以 ul 和 li 作为子级的 div，并更改了 jQuery 代码以获取 div 的子级，现在它正在工作:)。

附上代码：

HTML：

<div class="hover">
    <span>Custom Attributes</span>
    <ul class="slideDiv">                            
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="hover">
    <span>Custom Attributes2</span>
    <ul class="slideDiv">                          
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
<div class="hover">
    <span>Custom Attributes3</span>
    <ul class="slideDiv">                           
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
</div>

JS：

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);
    });
});

Answer 1

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

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

.find 仅选择给定元素的子元素 - 在本例中为 $(this)（悬停元素）。

另外，请确保您的元素 ids（例如 "hover"）是唯一的。