トグルボタンクラスのクリック機能

Question

私は、表示/非表示の動作を切り替えるボタンに結びつけられた一連のdivを持っています。親のdivを100vhに、個々のdivを50vhに調整しました。ユーザーの入力を確認して何とか右に移動したボタンを除いて、すべてが完全に表示されていました。私はさまざまな組み合わせを試してみました。個々のdivの中にボタンを置くことは、最終的には何をするのかです。今はもちろん、それぞれのdivの中にボタンが1つあるので、もはや機能しないIDのボタンがあります。各ボタンに異なるIDを付けることは、単一のクリックハンドラにアタッチされているため、オプションではありません。

もちろん、私はクリックハンドラとIDが壊れているボタンが必要です。私はクラスを使用しようとし、クラスにクリックの振る舞いを追加して調べましたが、SOの提案は一切ありませんでした。私はクラス（ボタンがdiv idの子であるところ）で子セレクタを使ってみました。

ここでは、どのように動作したかのミニコードサンプルがあります。どのように私は各divの中に別のボタンを持ってどこに働くクリック機能（各ボタンのIDを分離することに頼らずに - それはidの多くでしょう）を持つことができますか？

HTML：

<div id="quiz" style="height:100vh;"> 
    <div id="divone" style="height:50vh;"> 
    Div One! 
    </div> 
    <div id="divtwo" style="display:none"> 
    Div Two! 
    </div> 
    <button id="clickything">Click me!</button> 
    </div 

JS/jQueryの：

var divs = ["divone", "divtwo", "divthree"] 
var i = 0 
$("#clickything").click(function() { 
    $("#" + divs[0]).hide(); 
    $("#" + divs[1]).show(); 
}) 

Answer 1

（それはクイズの場合）なぜ、代わりに質問にdiv要素をクリックする用途のボタンを使用します。

両方のdivは、あなたが他を隠すためにそれを使用することができ、親である場合には、より良い（目標の私の推論から）UIとシンプルなJS

だろう。