Drupal Commerce Kickstart Список продуктов theming

Question

Я разрабатываю веб-сайт с Drupal commerce Kickstart.
Я хочу изменить пользовательский интерфейс карты продукта на Mouseover.
Я выполнил его, добавив скрипт в файл js
Но он применяется для всех карточек продуктов.
Я хочу применять события для отдельных карточек продуктов.
вот мой код!

Drupal.behaviors.Mouse_enter_on_product={ 
attach: function(context, settings){ 
    $('.field-type-image').mouseenter(function(){ 
    $('.field-type-commerce-product-reference').show(); 
    }); 
    } 
} 


Drupal.behaviors.Mouse_leave_from_product={ 
attach: function(context, settings){ 
    $('.field-type-image').mouseleave(function(){ 
    $('.field-type-commerce-product-reference').hide(); 
    }); 
    } 
} 

Answer 1

Попробуйте это:

Drupal.behaviors.Mouse_enter_on_product={ 
    attach: function(context, settings){ 
     $('.field-type-image').mouseenter(function(){ 
     $(this).parent().find('.field-type-commerce-product-reference').show(); 
    }); 
    } 
} 


Drupal.behaviors.Mouse_leave_from_product={ 
    attach: function(context, settings){ 
     $('.field-type-image').mouseleave(function(){ 
     $(this).parent().find('.field-type-commerce-product-reference').hide(); 
    }); 
    } 
} 

Вы должны показать/скрыть только парил элемент продукта, поэтому прежде чем делать какие-либо скрыть/показать вам нужно идти к родительскому элементу, а затем сделать находку(). Я предполагаю, что .field-type-образ .field-type-commerce-product-refrence имеют общего первого предка (они являются братьями и сестрами).

Вы также могли бы сделать что-то вроде

$(this).closest('.class_of_wrapper_for_all_product').find('...').hide() or show() 

Удачи