Drupal Commerce Kickstart 产品列表主题

【问题标题】：Drupal Commerce Kickstart Product list themingDrupal Commerce Kickstart 产品列表主题
【发布时间】：2025-12-02 01:45:01
【问题描述】：

我正在使用 Drupal commerce Kickstart 开发一个网站。
我想更改鼠标悬停时的产品卡片 UI。
我通过在 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();
    }); 
  }  
}

【问题讨论】：

标签： drupal drupal-7 drupal-theming drupal-commerce

【解决方案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();
    }); 
    }  
}

您只需要显示/隐藏悬停的产品元素，因此在进行任何隐藏/显示之前，您需要先找到父元素，然后执行 find()。我假设 .field-type-image 和 .field-type-commerce-product-refrence 有一个共同的祖先（他们是兄弟姐妹）。

你也可以这样做

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

祝你好运

【讨论】：