ボタンで複数のIDを切り替えます

Question

私は新しい初心者です。私は本当にそれを学びたいと思っています。最近、すべての可能なオプションと設定でCodemirorでHTMLエディタを作成しようとしています。私はこれが新しい初心者にとっては難しいことを知っていますが、私には信仰があります。だから、今はHTMLエディタのための変更可能な分割ペインをしようとしています。私はsplitpane "Jquery splitpane"を持っています。私は、水平と垂直のビューの間で変更するオプションを持っています。しかしそれを行うには、スプリットペインに使用されるdivの「クラス」と「IDS」を変更する必要があります。垂直分割ペインにはいくつかのクラスとIDSがあり、水平には他のクラスがあります。私はボタンで同時に複数のクラスを切り替える方法を見つけましたが、今は "IDS"に問題があります。私はこのサイトで見つかったスクリプトをmodifietに持っていますが、動作させることはできません。あなたが私が問題を解決するのを手助けできるなら、私は本当に感謝します。だからここにIDを切り替えるためのスクリプトです：

#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>

私はそれらのいずれかを削除した場合、私はIDのいずれかを切り替えることができますが、私は同時にトグルする4つの以上のIDを必要とします。

Answer 1

.buttontoggleの2つのクリックイベント関数を作成しました。ボタンをクリックすると、これらの機能が両方実行されます。各機能にはclickCount++があるため、クリックごとにclickCountの値が2増加します。 0で2を何度も何度も何度も何度も追加すると、2の倍数が得られ、2のmodを使うと常に0が得られます。これは、1つの条件が常に真であるため色が切り替わることはありません。

なぜあなたはイベントを2回書きましたかについてはわかりませんが、これにはいくつかの解決策があります。あなたのニーズに合ったものを使うことができます。 あなたが唯一のクリックイベントで罰金である場合、ちょうど2つのイベントをマージ：

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

をそれとも、何らかの理由で二つの機能を必要とする場合は、あなたがそれらのいずれかからclickCount++を削除することができます。