【问题标题】: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()
    

    祝你好运

    【讨论】: