Показывать только div продукта, зависшего в сетке категорий с помощью jQuery - PullRequest
Новая
       10

Показывать только div продукта, зависшего в сетке категорий с помощью jQuery

0 голосов
/ 15 ноября 2011

В 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/, чтобы вы могли видеть там, что он сейчас не работает так: (.

Редактировать:Сейчас я изменил код на div с 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);
    });
});

1 Ответ

0 голосов
/ 15 ноября 2011

Сложно сказать, но я думаю, что вы должны делать это: 

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

.find выбирает только дочерние элементы данного элемента - в данном случае $(this) (элемент hovered).

Также убедитесь, что ваш элемент id s (например, "hover") уникален.

...