W tym przełączniku jQuery staram się, że przycisk, który jest obecnie klikany Wróć do pierwotnego stanu, gdy kliknięty jest inny przycisk. Identyfikator podobny do przycisku OFF, który zostanie kliknięty najpierw automatycznie po załadowaniu strony. Próbowałem wielu kodów, ale nie może się go pracować.

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);

    });

});
1
AbuN2286 4 lipiec 2017, 02:30

4 odpowiedzi

Najlepsza odpowiedź

Po kliknięciu przycisku można wyłączyć drugi przycisk, ustawiając właściwości CSS dla tego przycisku do inherit. Resetuje właściwości do ich domyślnych. Możesz kierować je z $('#darkmodeoff') i $('#darkmodeon'), tak jak używasz $(this).

Aby ustawić przycisk Off, aby wybrać domyślnie, wszystko, co musisz zrobić, to zastosować style do niego w $(document.ready). Przeszedłem z $('#darkmodeoff')[0].style.backgroundColor i $('#darkmodeoff')[0].style.color dla tego.

Osobiście zalecałbym dodanie cursor: pointer do przycisków, aby pojawić się tak, jakby faktycznie klikniesz na nich, a outline: none do button:hover, aby usunąć niebieską obwódkę, która zostanie wygenerowana domyślnie . Dodałem je do fragmentu :)

$(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>

Mam nadzieję że to pomoże! :)

1
Obsidian Age 3 lipiec 2017, 23:41
  • Jeśli chcesz odwrócić wydarzenie, musisz przejść w Handlerze jako argument do wydarzenia Click.
  • Zamiast dodawać CSS w locie, użyj klasy, aby kierować stanem, który jest czyszczący.
  • Aby wywołać handler, na obciążeniu strony, wywołać zdarzenie Click Po związaniu.
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>
1
Sushanth -- 3 lipiec 2017, 23:43

Usuń $(this).off('click',darkon); i zamiast tego dodać $(darkon).trigger('click'); do początku obsługi event darkoff i $(darkoff).trigger('click'); na początku obsługi event darkon.

Przed zamknięciem Handler Event darkoff Dodaj to }).trigger('click');

Edytowałem twój oryginalny kod, ale w tej chwili jestem na moim telefonie.

1
James 3 lipiec 2017, 23:40

Możesz to łatwo zrobić za pomocą klas i jQuery.

Utwórz nową klasę dla stanu "on".

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

Następnie zmień swoje kliknięcia Kliknij, aby włączyć i wyłączyć tę klasę zamiast ustawiania określonych stylów 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");
    });
});
4
Wayne Allen 4 lipiec 2017, 00:41