Question

在这个jquery开关中，我试图使当前单击的按钮在单击另一个按钮时返回到其原始状态。也就像在加载页面时首先自动点击关闭按钮一样。我尝试了很多代码，但似乎无法让它工作。

感谢您的帮助!!!

HTML：

<!DOCTYPE HTML>
<html>

<head>

    <title>Toggleswitch</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src='script.js' type='text/javascript'></script>

</head>
<body>

<div class="switchcontainer">   
    <button id="darkmodeon">ON</button>
    <button id="darkmodeoff">OFF</button>
</div>

</body>
</html>

CSS：

body{
    background-color: black;
}

.switchcontainer{
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-radius: 50px;
    width: 125px;
    padding: 5px;

}

button{
    width:50px;
    height: 50px;
    border: none;
    border-radius: 50px;
    background-color: #d8d8d8;
    color: #777777;
    font-family: 'calibri light';
    font-size: 17px;
    font-weight: bold;

}

JQUERY：

$(document).ready(function(){
    var darkon = '#darkmodeon';
    var darkoff = '#darkmodeoff';

    $(darkon).click(function(){
        $(this).css({
            "background-color": "#85c452",
            "color": "white",
            "transition": "all 0.2s ease"
        });
    });

    $(darkoff).click(function(){
        $(this).css({
            "background-color": "#85c452",
            "color": "white",
            "transition": "all 0.2s ease"
        });

        $(this).off('click',darkon);

    });

});

Answer 1

您可以使用类和Jquery轻松完成。

为“开启”状态创建一个新类。

.on {
     background-color: #85c452;
     color: white;
     transition: all 0.2s ease;
 }

然后更改您的点击处理程序以打开和关闭此类，而不是设置特定的CSS样式。

$(document).ready(function(){
    var darkon = '#darkmodeon';
    var darkoff = '#darkmodeoff';

    $(darkon).click(function(){
        $(this).addClass("on");
        $(darkoff).removeClass("on");
    });

    $(darkoff).click(function(){
        $(this).addClass("on");
        $(darkon).removeClass("on");
    });
});

Answer 2

单击按钮时，可以通过将该按钮的CSS属性设置为inherit来关闭另一个按钮。这会将属性重置为默认值。您可以使用$('#darkmodeoff')和$('#darkmodeon')定位它们，就像使用$(this)一样。

要设置默认选择的Off按钮，您只需在$(document.ready)中将样式应用于该按钮即可。我已经使用$('#darkmodeoff')[0].style.backgroundColor和$('#darkmodeoff')[0].style.color了。

就个人而言，我还建议在按钮上添加cursor: pointer，使其显示为实际点击它们，并outline: none添加到button:hover以删除获得的蓝色边框默认生成。我已将这些添加到代码段中：）

$(document).ready(function() {
  var darkon = '#darkmodeon';
  var darkoff = '#darkmodeoff';
  
  // Set the off to clicked by default
  $('#darkmodeoff')[0].style.backgroundColor = "#85c452";
  $('#darkmodeoff')[0].style.color = "white";

  $(darkon).click(function() {
    $(this).css({
      "background-color": "#85c452",
      "color": "white",
      "transition": "all 0.2s ease"
    });
    $('#darkmodeoff').css({
      "background-color": "inherit",
      "color": "inherit",
      "transition": "all 0.2s ease"
    });
  });

  $(darkoff).click(function() {
    $(this).css({
      "background-color": "#85c452",
      "color": "white",
      "transition": "all 0.2s ease"
    });
    $('#darkmodeon').css({
      "background-color": "inherit",
      "color": "inherit",
      "transition": "all 0.2s ease"
    });
  });

});

body {
  background-color: black;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 50px;
  width: 125px;
  padding: 5px;
}

button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50px;
  background-color: #d8d8d8;
  color: #777777;
  font-family: 'calibri light';
  font-size: 17px;
  font-weight: bold;
  cursor: pointer; /* ADDED */
}

button:focus {
  outline: none; /* ADDED */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="switchcontainer">
  <button id="darkmodeon">ON</button>
  <button id="darkmodeoff">OFF</button>
</div>

希望这有帮助！：）

Answer 3

删除$(this).off('click',darkon);，然后将$(darkon).trigger('click');添加到darkoff事件处理程序的开头，将$(darkoff).trigger('click');添加到darkon事件处理程序的开头。

关闭darkoff事件处理程序之前，请添加此}).trigger('click');

我会编辑你原来的代码，但我现在正在打电话。

Answer 4

如果要转换事件，则必须将处理程序作为click事件的参数传递。
不是动态添加CSS，而是使用类来定位状态，这更清晰。
要在页面加载时调用handler，请在绑定处理程序后触发click事件。

var darkon = '#darkmodeon';
var darkoff = '#darkmodeoff';

// This is how you should be binding your click handler
// to the button if you are planning to turn of the event
// at a later stage. Since, the `off` method expects the same
// function to be passed when you attach the event
$(darkon).click(addActiveClass);

$(darkoff).click(function(e) {
  addActiveClass(e);

  $(darkon).removeClass('on');
  
  $(darkon).off('click', addActiveClass);

});

function addActiveClass(e) {
   var $target = $(e.target);
   
   $target.addClass('on');
}

$(darkon).click();

body {
  background-color: black;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 50px;
  width: 125px;
  padding: 5px;
}

button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50px;
  background-color: #d8d8d8;
  color: #777777;
  font-family: 'calibri light';
  font-size: 17px;
  font-weight: bold;
}

.on {
  background-color: #85c452;
  transition: all 0.2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchcontainer">
  <button id="darkmodeon">ON</button>
  <button id="darkmodeoff">OFF</button>
</div>

如何在单击其他按钮时删除jquery .css（）？

4 个答案: