我创建了一个 jQuery plugin ,这会在某些图像上叠加悬停效果。
它工作正常,但后来我考虑让其他图像在激活所述插件的功能时也得到覆盖。我考虑过使用 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)');
};
该插件将 hover-container 类赋予具有效果的图像。但是 if else 代码什么都不做。它没有错误,但不会触发。我在这里错过了什么?谢谢!
最佳答案
虽然我强烈建议使用单个类,但下面的代码应该会在 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();
});
关于javascript - 应用函数时应用类或函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55285080/