jQueryで画像のランダム表示と処理について教えて頂きたいです。

jQueryでボタンを押したら非表示の６つの画像の中から１つランダム表示させて、その出た画像によって画像が動くなどの演出処理をしたいのですが、調べても分からず教えて頂きたいです。下記のように乱数を使って途中までやりましたが反応しませんでした。（表示したい画像は最初非表示にしてその演出処理が終わったらまた非表示にしたいです。）

$(function(){
    $('#buttun').on('click',function(){

var images = [
  '1.jpg',
  '2.jpg',
  '3.jpg',
  '4.jpg',
  '5.jpg',
  '6.jpg',
];
var randImg = images[Math.floor(Math.random() * images.length)];
$('.random').attr('src', randImg);

     });
   });

（表示後の演出は#abcdefが動いて出た画像によって移動距離が変わるようにしたいです。）
$("#abcdef").animate({
"marginLeft": "000px"
});

html


<body>
<div id="butuun">ボタン</div>
<div class="random"><img src="1.jpg"></div>
<div id="abcdef"><img src="abcdef.jpg"></div>
</body>

css

  .random{
    position: absolute;
    width:100px;
    top: 0;
    left: 0;
  }

退会済みユーザー

2020/11/16 06:58

コードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなりますので。インデントされてないコードは質問者さん自身も読む気がしないのでは？

shun_1110

2020/11/16 07:25

囲みました。ありがとうございます。

plasticgrammer

2020/11/16 07:29

HTML全体のコードを記載してください。（#abcdef が何を指しているのかわかりません）

shun_1110

2020/11/16 07:43

htmlコードを記載しました。 #abcdefはランダム表示後に処理したい画像になります。

行動規範の内容に同意します

回答1件

random要素がdivなら

$('.random').attr('src', randImg);

↓↓↓

$('.random img').attr('src', randImg);

投稿2020/11/16 07:37

編集2020/11/16 07:38

yambejp

総合スコア116724

shun_1110

2020/11/16 07:58

ありがとうございます。指示通り直したらランダム表示は動作出来ました。その表示された画像によってさらに処理をしたいのですが可能でしょうか。

yambejp

2020/11/16 08:35

$("#abcdef")とありますが、「<div class="abcdefc"><img src="abcdefc.jpg"></div>」を指定するなら$(".abcdef")です

shun_1110

2020/11/16 08:43

不備がありすみません。idに修正致しました。

yambejp

2020/11/16 08:49 編集

abcdefをabcdefcにタイプミスしたり凡ミスが続いていますよ左マージンのも000pxじゃ指示してないのと同じです <div id="abcdef"><img src="abcdefc.jpg"></div> の左マージンを変更するなら $("#abcdef img").animate({ "marginLeft": "300px" });

行動規範の内容に同意します