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是身体的类，它基本上会改变按钮点击的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

刚开始工作：https://www.youtube.com/watch?v=HG2Yd-3r4-M。这里有两个问题。

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

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

请注意，我必须使用随机图像来实际显示代码的工作情况。

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

1 个答案: