jQueryで同じクラス名のものを別物として扱いたい

<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 ベストアンサー 回答者： fujillin 回答日時： 2022/06/17 15:14

こんにちは

＞そこのクラス名を変えたり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';
}
});

この回答へのお礼

ありがとうございます！！
初心者なもので調べ方がわからずに困っていました。
無事表示させることが出来ました。

お礼日時：2022/06/17 15:37