Funktion führt nur einmal aus

Ich versuche, Navbar Farbe von weiß nach blau und umgekehrt mit Umschaltfläche zu ändern.Wenn ich auf die Schaltfläche klicken, ändert sich von weiß nach blau, aber wenn ich ein anderes Mal klicken wird nicht zurück zu weiße Farbe.Funktion führt nur einmal aus

Hier ist mein jQuery-Code.

$(".switch").click(function(){ 
    var numberOfClicks=0; 
    numberOfClicks++; 
    if(numberOfClicks%2 !=0){ 
    $("#nav-menu").css("background-color","blue"); 
    }else { 
    $("#nav-menu").css("background-color","white"); 
    } 

    });

Und hier ist der Code der Umschaltknopf

<label class="switch"> 
     <input type="checkbox"> 
     <div class="slider" id="toggleButton"></div> 
    </label>

Quelle

2017-06-19 Stanimir

Sie erklären 'numberOfClicks' jedes Mal, wenn die Schaltfläche geklickt wird - es wird nie über 1 – tymeJV

Verschieben' numberOfClicks' außerhalb von '$ (“ erhöhen. switch "). click (function() {' neue Variable wird wieder erzeugt n wieder –

Sie erklären numberOfClicksinnerhalb Ihre Click-Handler. Das bedeutet, dass bei jedem Klick auf die Schaltfläche die Variable wieder auf Null instanziiert wird. Es wird immer 1.

Statt sein, so etwas zu tun:

var numberOfClicks=0; 

$(".switch").click(function(){ 
    numberOfClicks++; 
    if(numberOfClicks%2 !=0){ 
    $("#nav-menu").css("background-color","blue"); 
    }else { 
    $("#nav-menu").css("background-color","white"); 
    } 

    });

Quelle

2017-06-19 14:04:56

Ja ich habe es total übersehen es setzt numberOfClicks im Prinzip auf Null jedesmal wenn die Funktion aufgerufen wird. Daher ist der Maximalwert 1. – Stanimir

versuchen, meine Antwort, können Sie Klassen wechseln Hintergrundfarbe

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
.blue{background-color:blue !important}; 
 
.white{background-color:white !important}; 
 
</style> 
 

 
<body> 
 

 
<div class="navbar navbar-preheader navbar-default" role="navigation"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle white collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu" role="menu"> 
 
        <li><a href="#">Action</a></li> 
 
        <li><a href="#">Another action</a></li> 
 
        <li><a href="#">Something else here</a></li> 
 
        <li class="divider"></li> 
 
        <li class="dropdown-header">Nav header</li> 
 
        <li><a href="#">Separated link</a></li> 
 
        <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="./">Default</a></li> 
 
       <li><a href="../navbar-static-top/">Static top</a></li> 
 
       <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
 
      </ul> 
 
      </div><!--/.nav-collapse --> 
 
     </div><!--/.container-fluid --> 
 
     </div> 
 
<script> 
 
$('.navbar-toggle').click(function(){ 
 
$('.navbar-toggle').toggleClass('blue white'); 
 
}); 
 
</script> 
 
</body> 
 
</html>

Quelle

2017-06-19 14:17:16

Dein Code funktioniert gut, aber irgendwie hat er gewonnen Es funktioniert nicht, wenn ich die Klassen blau und weiß in einer separaten CSS-Datei einstelle. – Stanimir

Dude es funktioniert gut, auch wenn, deklarieren wir diese Klassen in separaten CSS-Datei auch, ich habe es versucht, es funktioniert gut, versuchen Sie einmal –

Ich gelöscht und schrieb Css Link wieder und es funktioniert – Stanimir

1 zu ändern/3) - Sie können überprüfen, ob die Schaltfläche aktiviert ist oder nicht.
Wenn diese Option aktiviert, als blau, wenn nicht, dann weiß:

$(document).ready(function(){ 
 

 
$(".switch").click(function(){ 
 
    var nav_menu = $("#nav-menu"); 
 
\t if($(this).children("input").prop("checked")) { 
 
\t nav_menu.addClass("blue"); 
 
\t } 
 
\t else { 
 
\t nav_menu.removeClass("blue") 
 
\t } 
 
    }); 
 
});

.blue { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<label class="switch"> 
 
<input type="checkbox"> 
 
<div class="slider" id="toggleButton"></div> 
 
</label> 
 

 
<div id="nav-menu">nav-menu</div>

2/3) - Oder Sie können ckeck wenn Elementklasse blue hat oder nicht:

$(document).ready(function(){ 
 

 
$(".switch").click(function(){ 
 
    var nav_menu = $("#nav-menu"); 
 
    if(nav_menu.hasClass("blue")) { 
 
\t  nav_menu.removeClass("blue") 
 
    } 
 
    else { 
 
\t  nav_menu.addClass("blue"); 
 
    } 
 
    }); 
 
});

.blue { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<label class="switch"> 
 
<input type="checkbox"> 
 
<div class="slider" id="toggleButton"></div> 
 
</label> 
 

 
<div id="nav-menu">nav-menu</div>

3/3) - oder sho RTEST Art und Weise mit Klasse Knebel:

$(document).ready(function(){ 
 

 
    $(".switch").click(function(){ 
 
    $("#nav-menu").toggleClass("blue"); 
 
    }); 
 
    
 
});

.blue { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<label class="switch"> 
 
<input type="checkbox"> 
 
<div class="slider" id="toggleButton"></div> 
 
</label> 
 

 
<div id="nav-menu">nav-menu</div>

Quelle

2017-06-19 14:19:38

Erste funktioniert perfekt.Es hat wirklich den Job .Hvala – Stanimir

Funktion führt nur einmal aus

Antwort

Verwandte Themen