ifステートメントを使用してgetelement by idを記述し、1つのボタンをクリックすると、divが表示され、残りが非表示になるようにするにはどうすればよいですか？

debugcn 投稿 Dev

user2763557

したがって、これらのボタンの1つをクリックすると、残りを非表示にして、クリックされたボタンに属するdivを表示したいと思います。つまり、allButtonをクリックすると、すべてが表示されます。onButtonをクリックすると、オンラインDivのみが表示され、offButtonの場合はその逆になります。

私のオンラインdivはクラス「onlineWrapper」の下にあり、私のオフラインdivはクラス「offlineWrapper」の下にあります。

これを行うには、ボタンごとに.hide（）または.toggle（）を個別に記述するのではなく、idによるget要素と組み合わせたifステートメントを記述します（これが適切な方法である場合）。

jqueryでこれを行うための最良の方法は何ですか？

<div class="btn-group">
  <button class='allButton'>All</button>
  <button class='onButton'>Online</button>
  <button class='offButton'>Offline</button>
</div>

ルイ・パトリス・ベセット

あなたが説明したことをするのに比較は必要ないと思います...各ボタンのイベントハンドラーだけです。下記参照：

$(".onButton").on("click",function(){
  $("#onlineWrapper").show();
  $("#offlineWrapper").hide();
});
$(".offButton").on("click",function(){
  $("#onlineWrapper").hide();
  $("#offlineWrapper").show();
});
$(".allButton").on("click",function(){
  $("#onlineWrapper").show();
  $("#offlineWrapper").show();
});

#onlineWrapper, #offlineWrapper{
  border: 1px solid black;
  padding:1em;
}

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

<div class="btn-group">
  <button class='allButton'>All</button>
  <button class='onButton'>Online</button>
  <button class='offButton'>Offline</button>
</div>

<div id="onlineWrapper">Online div</div>
<div id="offlineWrapper">Offline div</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-8

コメントを追加

サインイン

Related 関連記事

記事