<tr>
<td style="width: 100px;">
<img class="pa" src="https://1.jpg"/>
<img class="pb" src="1a.jpg"/>
</td>
<td style="width: 100px;">
<img class="pa" src="2.jpg"/>
<img class="pb" src="2a.jpg"/>
</td>
<td style="width: 100px;">
<img class="pa" src="3.jpg"/>
<img class="pb" src="3a.jpg"/>
</td>
</tr>
のようなhtmlと
jQuery('.pa').click(function(){
jQuery('.pb').css('display','inline')
})
のようなjQueryと
.pb {display:none;}
のようなCSSを使って.paがクリックされたときに.pbの画像を表示させたいと考えているのですが
1.jpgをクリックすると1a.jpg,2a.jpg,3a.jpgがすべて表示されます。
現在作っているものの事情により、そこのクラス名を変えたりidを利用したりが出来ない状況なのですが、どのpaがクリックされたか判別し、その直後のpbのCSSのみを変更するような方法はありますか?
ご教示お願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
>そこのクラス名を変えたりidを利用したりが出来ない状況なのですが~
要素を特定するのに、idやクラスがないとできないということはありません。
とりあえずそのままクラス名を利用して指定するのなら・・
$('.pa').on('click', e=>{
$(e.target).next('.pb').css('display', 'inline');
});
とかではいかが?
以下は、idやクラス名を用いない方法での一例です。ご参考までに。
(jQueryも不要です)
HTMLの<tr>の上位構造が不明なので、やや正確性に欠けますけれど・・
document.addEventListener('click', e=>{
if([...document.querySelectorAll('td img:first-child')].includes(e.target)){
const n = e.target.nextElementSibling;
if(n && n.nodeName == 'IMG') n.style.display = 'inline';
}
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アップロードファイルの種類に...
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
オンマウスで画像表示+表示し...
-
一定時間で入れ替わるバナー画...
-
クリックでクリッカブルマップ...
-
時間差で画像を動作させたいjav...
-
全部のサイコロをjavascriptで...
-
IE6でmax-width:100px; max-hei...
-
clear機能を失わずにファイルア...
-
Javascript初心者|jQueryの.va...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
HTMLですCSSです 画像のように...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
textareaに画像を表示したい
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Colorboxがうまく設置できません
-
デフォルト非表示にしたい。【t...
-
「画像クリックで音声再生」を ...
-
Javascript初心者|jQueryの.va...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
jQueryでのドラッグアンドドロ...
-
全部のサイコロをjavascriptで...
-
JavaScriptでクレイアニメ。ち...
-
bxsliderで最初に縦に複数表示...
-
アップロードファイルの種類に...
-
clear機能を失わずにファイルア...
-
JavaScriptでの画像切り替えを...
-
マウスカーソルに合わせて画像...
-
交互に入れ替わる画像を複数配置
-
サイトに横スクロールのスライ...
-
サムネイルにカーソルを合わせ...
おすすめ情報