我已经创建了一个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)');
};
该插件将类悬停容器提供给具有效果的图像。但是if else代码什么也不做。它没有错误,但不会触发。我在这里想念什么?谢谢!
答案 0 :(得分:0)
尽管我强烈建议使用单个类,但以下代码应触发关于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();
});