Question

在Magento上，我试图在我悬停产品时立即在新的div（显示/隐藏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>

我将脚本添加到[新链接] http://jsfiddle.net/xsxfr/47/，这样你就可以看到它现在不能正常工作：（。

编辑：我现在改变了代码，用ul和li作为子代码，并改变了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)（悬停元素）。

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

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

1 个答案: