
<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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascript初心者|jQueryの.va...
-
ボタンを押すたびに交互に切り...
-
サムネイルにカーソルを合わせ...
-
jQueryで同じクラス名のものを...
-
一定時間で入れ替わるバナー画...
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
1枚の画像をクリックすると複数...
-
libjpegライブラリの使い方につ...
-
jspでcssが読み込めない
-
htmlの記述で link rel=styles...
-
createElementで作成した要素を...
-
removeAttribute()メソッドで削...
-
innerHTMLに入れたリンクが反応...
-
javascriptでEnterキーをtabキ...
-
eclipseでcssを使うためには?
-
ネストされたチェックボックス...
-
リキッドデザイン3カラム左端幅...
-
div要素をランダムに表示させたい
-
css固定したフッターが本文と重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
javascript ランダム表示
-
ホームページ作成で画像スクロ...
-
JavaScript - 月ごとに画像変化
-
HTMLへ要素の挿入について
-
animateを使用したマウスオーバ...
-
IMGタグごとにCSSを設定する方法
-
一定時間で入れ替わるバナー画...
-
embed要素のsrc属性の値を変更...
-
アニメーションをループさせたい
-
jqueryを使用した画像スクロー...
-
clear機能を失わずにファイルア...
-
jQueryでセレクタに複数のIDを...
-
イラストのボタンを押したとき...
-
吹き出しに画像とコメントを入...
-
セレクトボックスで、リンクバ...
-
Jquery cheeckbox(複数)とsli...
-
複数bxsliderをタブで切り替え...
おすすめ情報