JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで選択したdivだけにhideクラスを切り替える方法

選択したdivのみにhideクラスをトグル（切り替え）するには、クリックイベントを設定する必要があります。ここでは、「+」マークをクリックしたときに特定のdivを非表示にするケースを想定して解説します。

「+」や「-」のフォントアイコンを表示するには、あらかじめFont Awesomeをリンクしておきましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">

以下は、「+」マークをクリックしたときにhideクラスを切り替えるサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
.hideDiv {
display: none;
}
</style>
</head>
<body>
<div class="firstDetails">
<h2 class="customer-track">Customer 1<i class="fa fa-plus"></i></h2>
<div>
<p class="customer">John</p>
<p class="customer">US</p>
</div>
<div class="secondDetails">
<h2 class="customer-track">Customer 2 <i class="fa fa-plus"></i></h2>
<div>
<p class="customer">David</p>
<p class="customer">AUS</p>
</div>
</div>
</div>
<script>
$(".fa-plus").on("click", function(){
$(this).parent().siblings('.secondDetails').toggleClass("hideDiv");
});
</script>
</body>
</html>

コードのポイント

このコードの仕組みは以下のとおりです。

1. クリックイベントの設定
jQueryのセレクター $(".fa-plus") でプラスアイコンを取得し、on("click", ...) でクリックイベントを登録します。

2. 対象要素の指定
$(this).parent().siblings('.secondDetails') により、クリックされたアイコンの親要素（h2）から見て兄弟関係にある secondDetails クラスのdivを取得します。

3. クラスのトグル
toggleClass("hideDiv") を呼び出すことで、hideDiv クラス（display: none; が定義済み）の追加と削除が交互に行われ、表示・非表示が切り替わります。

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存し、ファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」を選択してください。

実行結果

プログラムを実行すると、次のような画面が表示されます。

JavaScriptで選択したdivだけにhideクラスを切り替える方法

「Customer 1」の横にあるプラスアイコンをクリックすると、以下のようにCustomer 2のdivが非表示になります。もう一度クリックすれば、再び表示される仕組みです。

JavaScriptで選択したdivだけにhideクラスを切り替える方法

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した