<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ランキング
-
clear機能を失わずにファイルア...
-
画像拡大とともにエレメントも...
-
デフォルト非表示にしたい。【t...
-
embed要素のsrc属性の値を変更...
-
画像をクリックで、2回新しい...
-
MAX関数を使ってからLEFT JOIN...
-
textareaに画像を表示したい
-
htmlの記述で link rel=styles...
-
小窓について教えて下さい。
-
スワップイメージが上手く動作...
-
bxsliderにて読み込み後に内容...
-
HTMLとJavaScriptで作ったタイ...
-
<div id="blank">内の<a>タグ群...
-
画像の特定の座標にカーソルが...
-
読み込んだQRコードをフォーム...
-
複数のラジオボタン項目でのテ...
-
MFCで画像を表示させているので...
-
JSPでの画像ファイル表示
-
createElementで作成した要素を...
-
透過pngの透明部分以外をクリッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
全部のサイコロをjavascriptで...
-
交互に入れ替わる画像を複数配置
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
「画像クリックで音声再生」を ...
-
bxsliderで最初に縦に複数表示...
-
JQueryを使用して、画像をドラ...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報