时间戳

首页 > 解决方案 > 应用函数时应用类或函数

javascript - 应用函数时应用类或函数

问题描述

我创建了一个jQuery 插件，可以在某些图像上叠加悬停效果。

它工作正常，但后来我考虑让其他图像也得到一个覆盖，当一个具有所述插件的功能时。我想过用if/else语句来做这个。像这样：

jQuery('#usp1, #usp2, #usp3, #usp4').picturehover({
  fontColor:'#fff',
  textAlign:'center',
  verticalMiddle: true,
  backgroundColor:'rgba(79,47,82,0.85)',
  height:'100%',
});

    if(jQuery('#usp1').hasClass('hover-container'))
    {
        jQuery('#usp2, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
    }
    else if(jQuery('#usp2').hasClass('hover-container'))
    {
        jQuery('#usp1, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
    }
    else if(jQuery('#usp3').hasClass('hover-container'))
    {
        jQuery('#usp1, #usp2, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
    }
    else if(jQuery('#usp4').hasClass('hover-container'))
    {
        jQuery('#usp1, #usp2, #usp3').css('backgroundColor', 'rgba(0,0,0,0.7)');
    }
    else
    {
        jQuery('#usp1, #usp2, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0)');
    };

该插件将类悬停容器提供给具有效果的图像。但是 if else 代码什么也不做。它没有错误，但不会触发。我在这里想念什么？谢谢！

标签： javascriptjquerycss

解决方案

虽然我强烈建议使用单个类，但下面的代码应该会触发你在 slideIn 和 slideOUT 上的 if 语句

 jQuery.add_overlay = function(){
    if(jQuery('#usp1').hasClass('hover-container'))
        {
            jQuery('#usp2, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
        }
        else if(jQuery('#usp2').hasClass('hover-container'))
        {
            jQuery('#usp1, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
        }
        else if(jQuery('#usp3').hasClass('hover-container'))
        {
            jQuery('#usp1, #usp2, #usp4').css('backgroundColor', 'rgba(0,0,0,0.7)');
        }
        else if(jQuery('#usp4').hasClass('hover-container'))
        {
            jQuery('#usp1, #usp2, #usp3').css('backgroundColor', 'rgba(0,0,0,0.7)');
        }
        else
        {
            jQuery('#usp1, #usp2, #usp3, #usp4').css('backgroundColor', 'rgba(0,0,0,0)');
        };
    }

    jQuery('#usp1, #usp2, #usp3, #usp4').picturehover().on('slideInEnd slideOutEnd',function(event,data){
          jQuery.add_overlay();
        });

推荐阅读