javascript - js脚本执行后无法为bg应用toggleclass

Question

我在页面上有这个按钮......

<div id="bgtoggle">
</div>

我在索引页上也有这个脚本

 <script>
         $(document).ready(function(){
    $("#bgtoggle").click(function () {
        $(".metro").toggleClass("bgcolorchange");
    });
});</script>

类 bgcolorchange 有这个 css

.bgcolorchange {
    background-image: url("../images/mthc/music-therapy-imageN.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow : hidden ;
    margin:0;
    padding:0;
    z-index:3000;
}

这很棒，因为 .metro 是 body 的类，它基本上会在单击按钮时更改 img……但是……

我也有一个菜单项的脚本，它也改变了 bg img..

$('.fa-question-circle').parent().on('click', function () {
      $(".metro").css('background-image','url('+"images/mthc/image2.jpg"+')');

问题是，一旦执行上述脚本并单击 fa-questin-circle，您将无法再使用切换，它不会覆盖 bgtoggle 类中包含的 img。我已经尝试过 z-index 和所有爵士乐，但不知道发生了什么。为什么是这样 ？

编辑:- fa-questino-circle 的 html

<div id="menu">
            <nav>
                <h2><i class="fa"></i>HOME</h2>
                <ul>
                    <li>
                        <a href="#"><i class="fa fa-question-circle"></i>

Answer 1

刚开始工作:see here .这里有两个问题。

第一个是当您添加 bgcolorchange 类时，它的 background-image 没有被考虑，因为第一个类 (metro) 已经拥有该属性。因此，我必须向其添加 !important 符号，从而能够删除会给您带来问题的 z-index 属性。

第二个问题是，当您通过 .css 函数设置 CSS 时，它会作为内联样式添加，它会覆盖 CSS 类中的相同属性。这是通过添加 $('.metro').css('background-image', ''); 作为 #bgtoggle 的点击事件的第一行解决的，在切换 BG 类之前删除内联样式。

请注意，我不得不使用随机图像来实际显示代码的工作。