Question

我正在使用Drupal commerce Kickstart开发一个网站我想在Mouseover上更改产品卡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();
    }); 
  }  
}

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();
    }); 
    }  
}

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

您也可以执行类似

的操作

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

祝你好运

Drupal Commerce Kickstart产品列表主题

1 个答案: