JavaScriptを使用して選択したdivでのみクラスを非表示に切り替えますか？
選択したdivでのみ非表示クラスを切り替えるには、クリックボタンでイベントを設定する必要があります。 +記号をクリックして特定のdivを非表示にする必要があるとします。
フォント+または-アイコンを取得するには、font-awesome-
をリンクする必要があります<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/ 4.7.0/css/font-awesome.min.css">
以下は、+記号-
をクリックしたときに非表示クラスを切り替えるコードです。例
<!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> 上記のプログラムを実行するには、ファイル名「anyName.html（index.html）」を保存して、ファイルを右クリックします。 VSCodeEditorで[OpenwithLiveServer]オプションを選択します。
出力
これにより、次の出力が生成されます-
「Customer1」の横にあるプラスアイコンをクリックすると、次の出力が表示されます。つまり、Customer2divは消えます-
-
ボタンクリック時にJavaScriptでdivを非表示にする方法は？
次は私たちのdivだとしましょう- <div id="showOrHide"> Welcome in JavaScript </div> 以下は私たちのボタンです。クリックすると、上記のdivが非表示になります- <button onclick="showOrHideDiv()">Click The Button</button> JavaScriptでstyle.displayの概念を使用して、divを非表示にします。以下はコードです- 例 <!DOCTYPE html> <ht
-
JavaScriptでdivのスクリーンショットを撮る方法
ウェブサイトをレイアウトするマークアップの一部をキャプチャ（画像に変換）し、キャプチャした画像を保存するか、何かを行う必要があります。したがって、この説明された動作を実現するための方法を考案する必要があります。 問題には、キャンバスだけでなくマークアップ要素のキャプチャも含まれるため、特に最初からキャプチャする場合は、少し複雑になります。したがって、簡単にするために、サードパーティのライブラリ htmltocanvasを使用します。 これは、名前が示すとおりに機能し、目的のマークアップをキャンバスに変換します。その後、キャンバス要素を画像としてダウンロードするだけです。 例 そのた