・画像がフェードアウトした後に「フェードアウトしました」って文字がアラートダイアログで表示されるようにして
動作
ホバーしたら画像をフェードアウト→フェードアウトした後に時間差でアラート表示(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