Toggle mehrere IDs mit Button

Question

Ich bin neuer Anfänger in Javascript und ich möchte es wirklich lernen, ich habe vor kurzem versucht, HTML-Editor mit Codemiror mit allen möglichen Optionen und Einstellungen zu machen. Ich weiß, dass dies schwer für neue Anfänger sein wird, aber ich habe Vertrauen. Also gerade jetzt versuche ich, veränderbare Splitpane für den HTML-Editor zu machen. Ich habe das Splitpanel "Jquery splitpane" und ich möchte die Möglichkeit haben zwischen horizontaler und vertikaler Ansicht zu wechseln. Aber dazu muss ich die "Klassen" und die "IDS" der Divs ändern, die für das Splitpanel verwendet werden. Das vertikale Splitpane hat einige Klassen und IDS und die horizontale haben andere. Ich habe herausgefunden, wie man mehrere Klassen gleichzeitig mit der Schaltfläche umschalten kann, aber jetzt habe ich Probleme mit dem "IDS". Ich habe ein Skript geändert, das hier auf der Website gefunden wurde, aber ich kann es nicht zum Laufen bringen. Wenn ihr mir helfen könnt, das Problem zu lösen, werde ich es wirklich schätzen. Also hier ist das Skript für Hin- und Herschalten der ids:

#red {background:red;} 
 
#blue {background:blue;} 
 

 
#green {background:green;} 
 
#yellow {background:yellow;}

<button href="#" class="buttontoggle buttontoggle2">changehtmlstyle</button> 
 

 
<div id="blue" class="toggleelement">This is a div</div> 
 

 
<div id="green" class="toggleelement2">This is a div</div> 
 

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

 
<script type="text/javascript"> 
 
    var clickCount = 0; 
 
    $(".buttontoggle").on("click", function() { 
 
     clickCount++; 
 
     $("div.toggleelement").attr("id", clickCount % 2 === 0 ? "blue" : "red"); 
 
    }); 
 
</script> 
 

 
<script type="text/javascript"> 
 
    var clickCount = 0; 
 
    $(".buttontoggle").on("click", function() { 
 
     clickCount++; 
 
     $("div.toggleelement2").attr("id", clickCount % 2 === 0 ? "blue" : "red"); 
 
    }); 
 
</script>

ich eine der ids wechseln kann, wenn ich einen von ihnen löschen, aber ich brauche mehr als 4-IDs zur gleichen Zeit zu wechseln.

Answer 1

Sie haben zwei Klickereignisfunktionen für die .buttontoggle erstellt. Wenn Sie auf die Schaltfläche klicken, werden beide Funktionen ausgeführt. Da jede Funktion über eine clickCount++ verfügt, wird der Wert clickCount bei jedem Klick um 2 erhöht. Wenn du immer wieder 0 mal 2 hinzufügst, erhältst du immer ein Vielfaches von 2, und wenn du den Mod 2 nimmst, erhältst du immer 0. Deshalb wirst du die Farben niemals umschalten sehen, da nur eine Bedingung immer wahr ist.

Ich bin nicht sicher, warum Sie das Ereignis zweimal geschrieben haben, aber es gibt ein paar Lösungen dafür. Sie können das verwenden, was Ihrem Bedarf entspricht. Wenn Sie mit nur einem Klick Ereignis in Ordnung sind, dann verschmelzen nur die beiden Ereignisse:

var clickCount = 0; 
$(".buttontoggle").on("click", function() { 
    clickCount++; 
    $("div.toggleelement").attr("id", clickCount % 2 === 0 ? "blue" : "red"); 
    $("div.toggleelement2").attr("id", clickCount % 2 === 0 ? "blue" : "red"); 
}); 

Oder wenn Sie aus irgendeinem Grund zwei Funktionen benötigen, können Sie clickCount++ von einem von ihnen entfernen.