Применять класс или функцию при применении функции

#javascript #jquery #css

Вопрос:

Я создал плагин 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 ничего не делает. Это не выдает ошибки, но и не запускает. Чего я здесь не понимаю? Спасибо!

Ответ №1:

Хотя я НАСТОЯТЕЛЬНО рекомендую использовать один класс, приведенный ниже код должен запускать ваш оператор if при slideinи slideOUT

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