javascript - 后台切换 JS 只工作一次

所以我的网站上有一个按钮,如下所示:

<button id = "bgb">Toggle Background</button>

我想让这个按钮在一个盒子里打开和关闭背景。因此,我在 JavaScript 中编写了一个脚本来执行此操作。

var bg = true;
document.querySelector("#bgb").onclick = function(){
    const mb = document.querySelector(".Main-Box");
    if (bg == true)
    {
        mb.style.background = "white";
        bgb = false;
    }
    if (bg == false)
    {
        mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
        bgb = true;
    }

}

但是,当我单击按钮时,它会很好地关闭它,但是当我想重新打开它时它不起作用;有什么建议么?

回答1

bg 始终设置为真。为什么你改变“bgb”?

尝试

<script>
    var bg = true;
    document.querySelector("#bgb").onclick = function () {
        const mb = document.querySelector(".Main-Box");
        if (bg) {
            mb.style.background = "red";
            bg = false;
        } else {
            mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
            bg = true;
        }
    } 
</script>

回答2

这是您想要的演示:

let bg = true;
document.querySelector("#bgb").onclick = function(){
    const mb = document.querySelector(".Main-Box");
    if (bg == true)
    {
        mb.style.background = "white";
        bg = false;
    }
    else if (bg == false)
    {
        mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)";
        bg = true;
    }

}
.Main-Box {
width: 100vw;
height: 100vh;
background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
}
<div class='Main-Box'>
<button id="bgb">Click Me!</button>
</div>

回答3

@cSharp 已经为您提供了解决问题的方法。但是,为了使您的整个代码更短更容易,您可以简单地使用: classList.toggle() 并通过打开和关闭 CSS-Class 来应用更改:

document.querySelector('#bgb').addEventListener("click", function() {
  document.querySelector('.Main-Box').classList.toggle('class-name');
});
.Main-Box {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
}

.class-name {
  background: white;
}


/* for visualisation only */
body {
  margin: 0;
}
<div class='Main-Box'>
  <button id="bgb">Click Me!</button>
</div>

回答4

如果没有必要,我不会使用全局变量来控制状态。

另外,还可以新建类属性,切换时只需要控制类即可。

以下是这两种方法的示例,供您参考。

document.querySelector('input[type=button]').onclick = function() {
  switchLinearGradientBackground('.main-box', 'linear-gradient');
}

function switchLinearGradientBackground(selector, switchClassName) {
  const elems = document.querySelectorAll(selector);
  for (let index = 0; index < elems.length; index++) {
    elems[index].classList.toggle(switchClassName);
  }
}
body {
  display: flex;
}

.main-box {
  flex-direction: column;
  display: flex;
  width: 200px;
  height: 200px;
}

.linear-gradient {
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706) !important;
}
<div class='main-box' />
<input type='button' value="switch background">
document.querySelector('input[type=button]').onclick = function() {
  switchLinearGradientBackground('.main-box');
}

function switchLinearGradientBackground(selector) {
  const elems = document.querySelectorAll(selector);
  const grad = 'linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706)';
  for (let index = 0; index < elems.length; index++) {
    const style = elems[index].style;
    style.background = style.background.length > 0 ? '' : grad;
  }
}
body {
  display: flex;
}

.main-box {
  flex-direction: column;
  display: flex;
  width: 200px;
  height: 200px;
}
<div class='main-box' />
<input type='button' value="switch background">

相似文章

最新文章