0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

2023.5.26 プログラミングメモ ラジオボタンchange他

Posted at

・画像がフェードアウトした後に「フェードアウトしました」って文字がアラートダイアログで表示されるようにして
動作
ホバーしたら画像をフェードアウト→フェードアウトした後に時間差でアラート表示(setTimeout使用)

・JS

'use strict';

$('img').hover(() => {
$('img')
.addClass('fade-out')
const Alert = function(){
alert('フェードアウトしました');
};
setTimeout(Alert, 500);
});

参考URL
https://qiita.com/chihiro/items/b105a901bbfd6c5b483c

●5/31
ラジオボタンを選択したら同じ位置にある画像に赤枠追加
選択が外れたら赤枠を削除

JSでの動作

シャドウの画像3つの配列を取得
const shadowImg = document.querySelectorAll('.shadowClass');

ラジオボタンの切り替えイベント
add.EventListener「change」
document.addEventListener("change", (e) => {

特定の配列番号を呼び出す場合変数の後に[番号]
例shadowClassの二番目と三番目を呼び出す場合
console.log("二番目と三番目" ,shadowImg[1], shadowImg[2]);

赤枠の切り替え、removeの二つの画像を一括指定したかったがうまく動作しなかった為
一つづつ指定
shadowImg[1].classList.remove('frame');
shadowImg[2].classList.remove('frame');
shadowImg[0].classList.add('frame')

jQでの動作

ラジオボタンの切り替えイベント
$( 'input[name="select"]:radio' ).change( function(e) {
該当するラジオボタンを指定して「.changeメソッド」を使用

赤枠の切り替えは
:not()メソッドを使用

case "left":
$('.shadowClass:not(:eq(0))').removeClass('frame');
$('.shadowClass').eq(0).addClass('frame')
break;
ラジオボタンの「left」が選択されたら
0番目の画像「以外」のframeクラスを削除
0番目の画像のframeクラスを追加する

・参考(ラジオボタンでのchangeイベント)
https://dev-k.hatenablog.com/entry/onchange-event-in-javascript-dev-k

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?