divのテキストを別のdivのテキストに変更する方法onclick
Alex98
私は5つのdivを持っており、1つをクリックすると選択され、別のdivをクリックした後、番号を切り替える必要があります（たとえば、最初のdivを7でクリックし、その後3番目のdivを15でクリックします。最初のdivの番号は15で、3番目のdivの番号は7である必要があります）。
<div class='cards'>
<div class='box'>7</div>
<div class='box'>6</div>
<div class='box'>15</div>
<div class='box'>8</div>
<div class='box'>3</div>
</div>
ライアンウィルソン
1つの解決策は、選択したものへの参照を保持するためのグローバルを保持し、クリックイベントですべてのdivにをdiv追加しclick eventてclassName box、グローバルがそうであるかどうかを確認することですnull。そうでない場合は、以前に選択した値に切り替えdivます。選択したdiv
let switchBox = null;
const boxes = document.querySelectorAll('.box');
for(let i = 0; i < boxes.length; i++){
boxes[i].addEventListener('click', function(){
SwitchValues(this);
});
}
function SwitchValues(box){
if(switchBox === null){
switchBox = box;
}else{
const switchText = switchBox.textContent;
const boxText = box.textContent;
box.textContent = switchText;
switchBox.textContent = boxText;
switchBox = null;
}
}<div class='cards'>
<div class='box'>7</div>
<div class='box'>6</div>
<div class='box'>15</div>
<div class='box'>8</div>
<div class='box'>3</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：「ノード」で「insertBefore」の実行に失敗しました：パラメーター1はJavascriptで「ノード」タイプではありません
- 次の投稿：Running scheduler in Spring boot is spawning a process external to Spring boot application context
関連記事
Related 関連記事
- 1
次のdivのテキストを変更する方法
- 2
div内の他の要素を変更せずにdiv内のテキストを変更する方法
- 3
別のdiv内にあるdivの下部にテキストを配置する方法
- 4
別のdivに含まれるテキストに応じてdivの背景色を変更するjQuery
- 5
テキストdivを別のdiv内に垂直に配置する
- 6
境界線の色を変更せずにDivのテキストの色を変更する方法
- 7
別の背景画像のテキストでdivを取得する方法
- 8
あるdivから別のdivにテキストを渡す方法
- 9
C# OnClick で MenuItem のテキストを変更する方法
- 10
div内のテキストに基づいてdivのサイズを変更する方法
- 11
UIButtonテキストを別のUIButtonテキストに変更する（swift）
- 12
ifステートメントJavascriptでdivのテキストを変更する
- 13
ページdivのテキストを変更する
- 14
div内のテキストのサイズを動的に変更する
- 15
<div>要素：サイズ変更中にdivテキストをそのままにする方法
- 16
同じクラスのonclickで複数のdivのテキストを変更する
- 17
ANTDテーブルテキストを別の言語に変更する方法
- 18
textareaに入力すると、テキストを別のdivにライブで変更します
- 19
divから出て、別のdivのサイズを変更するテキスト
- 20
`` `<p>` ``のテキストをjsの数字に変更する方法
- 21
別のdiv内で幅を動的に変更するdivの中央にテキストを配置するにはどうすればよいですか？
- 22
React-divテキストをクリックすると、別のdivからテキストを変更します
- 23
別のdivと一緒に右に浮いたdivの下部にテキストを配置する方法
- 24
内部タグの内容を変更せずにdivのテキストを変更する
- 25
テキストをクリックして、クリックしたテキストをReact.jsの別のテキストに変更する方法
- 26
divの中央にテキストを中央揃えする方法
- 27
テキストを親divの上端に移動する方法
- 28
divの外にテキストを取得する方法は？
- 29
divのテキストを中央に配置する方法
コメントを追加