Question

代码：

<style> .demo {color: yellow; background-color: purple} </style>
<p class="demo">my text</p>
<button id="change">click</button>
<script>
window.onload = function () {
var flipColors = query("#change"); 
  var target = query(".demo");
  flipColors.onclick = function() {
    style(target, "color", "white");
    style(target, "background-color", "black");
  };
};
</script>

当我点击按钮时，样式会发生变化。

我的问题是当按钮时我需要向JS添加什么再次单击 - 它将恢复原始样式，如果再次单击它将再次激活该功能，而不是制作两个按钮。

我知道我可以创建.demo和.demo1类并切换它们，但我想了解如何实现它 - 如果有可能的话。

注意：只是简单的JS，而不是JQuery等。

Answer 1

是的，toggle（）在这里效果非常好。我确实创建了两个切换类，并且javascript最初只是打开一个，然后切换两个状态。

＆＃13;

var flipColors = query("#change"); 
  var target = query(".demo");
  target.classList.add("demo-on");
  
  
  toggleClasses = function toggleClasses() {
    target.classList.toggle("demo-on");
    target.classList.toggle('demo-off');
  };

＆＃13;

.demo-off {
  color: yellow;
  background-color: purple;
}
.demo-on {
  color: purple;
  background-color: yellow;
}

＆＃13;

<p class="demo">my text</p>
<button id="change" onclick="toggleClasses()">click</button>

＆＃13;

啊，但你不想实际切换类，但css属性？轻松完成。试试这个：

＆＃13;

var theToggle = document.getElementById("change");
var toggleMe = document.getElementsByClassName("demo")[0];
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      toggleMe.style.color = "purple";
      toggleMe.style.backgroundColor = "yellow";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      toggleMe.style.color = "yellow";
      toggleMe.style.backgroundColor = "purple";
      break;
  }
}

＆＃13;

.demo {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

＆＃13;

<p class="demo">my text</p>
<button id="change">click</button>

＆＃13;

这是纯粹的js，我添加了一个属性，我用它来检查要使用的状态，但你可以轻松地关闭switch语句，例如，toggleMe.style.color - 希望这有助于！

Answer 2

我认为你正在寻找的这个词是“Toggle”。您希望某些内容从“活动”变为“非活动”，并且每次用户交互都会来回，即点击事件。

Javascript有一个用类处理它的函数。例如，以下代码行：

target.classList.toggle("active");

如果对象target不存在，

会将“active”作为类添加，如果它存在则将其删除。以下是HTML DOM classList Property toggle和其他方法的更多信息。

但是如果你正在寻找一个jQuery解决方案，那就有类似的功能：

$(".class").toggleClass("active");

这是.toggleClass() jQuery方法的文档。

Answer 3

如果您尝试使用javascript实现切换行为

您可以执行以下代码段

检查此代码段

＆＃13;

window.onload = function() {
  var flipColors = document.querySelector("#change");
  var target = document.querySelector(".demo");
  flipColors.onclick = function() {
    toggleStylechanges(target, "color", "white");
    toggleStylechanges(target, "backgroundColor", "black");
  };
}

function toggleStylechanges(element, cssProp, color) {
  if (element.style[cssProp] == "")
    element.style[cssProp] = color;
  else
    element.style[cssProp] = "";
}

＆＃13;

.demo {
  color: yellow;
  background-color: purple
}

＆＃13;

<p class="demo">my text</p>
<button id="change">click</button>

＆＃13;

希望有所帮助

Answer 4

尝试这样的事情：

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    if(clicked) {
      style(target, "color", "yellow");
      style(target, "background-color", "purple");
    } else {
      style(target, "color", "white");
      style(target, "background-color", "black");
    }
    clicked = !clicked;
  };
};

更短的版本：

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    var color = clicked ? "yellow" : "white";
    var bgColor = clicked ? "purple" : "black";
    style(target, "color", color);
    style(target, "background-color", bgColor);
    clicked = !clicked;        
  };
};

来回改变风格

4 个答案: