为什么jQuery点击事件只工作一次？

Question

当用户点击“阅读更多”按钮时，我试图用jQuery创建一个“关灯”的效果。

问题是，它只工作一次，当用户点击阅读更多，灯关闭(一个png半透明背景似乎覆盖了当前的背景)。如果用户点击“关闭文本”，效果不会消失。

var $j = jQuery;
$j(document).ready(function(){

// Hide shadow

jQuery(".shadow-class").css('background', 'none');

jQuery(".custom-read-more-toggle").on("click", function() { 

if( jQuery(".shadow-class").css('background', 'none') ) {
  jQuery(".shadow-class").css({background : 'url(/*PNG HERE*/)'});

 } else if (jQuery(".shadow-class").css('background', 'url(/*PNG HERE*/)')){ 
jQuery(".shadow-class").css('background', 'none');
}

});

});

.custom-read-more-toggle是用于“阅读更多”的按钮，而.shadow-class是用户单击按钮时出现的按钮。如果单击.custom-read-more切换，该类不会从DOM中消失。

.shadow-class {
z-index: 99999999999999;
}
.dark-overlay {
background: url(/* PNG HERE*/);

}

我已经尝试了这里发布的其他解决方案，但我不能解决它。

Answer 1

您应该像这样检查：

if( jQuery(".shadow-class").css('background') == 'none' ) {

而不是：

if( jQuery(".shadow-class").css('background', 'none') ) {

当像.css(prop,value)一样使用时，它设置属性值。当像.css(prop)一样使用时，它会获得属性值。

Answer 2

用法: if( jQuery(".shadow-class").css('background') == 'none‘)

Answer 3

缩短了您的代码行

   else if (jQuery(".shadow-class").css('background', 'url(/*PNG HERE*/)'))

    { 
       jQuery(".shadow-class").css('background', 'none');
    }

  and paste this

      else if (jQuery(".shadow-class").css('background')=='none')

    { 
       jQuery(".shadow-class").css('background', 'none');
    }