jqueryで自動で画像を切り替えたいのですが、コードが良くわかりません。
動作を実行する試行の過程でjsの基礎は一応学びました。
html上の{pre}がjs上の{active}に切り替わっているので、動作は確認できます。

以下は外部ファイルのjs
$(function(){
  var $img= $('.slide img')
$('.slide img:nth-child(n+2)').hide();
setInterval(function(){
    $("$img:first-child").fadeOut(2000);
    $("$img:nth-child(2)").fadeIn(2000);
    $("$img:first-child").addendTo(".slide");
},3000);


$('.text').text("active");
});
ーーーーーーーーーー以下はhtmlーーーーーーーー
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>menu</title>
    <link rel="stylesheet" href="port2.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  </head>
  <body>
   <header>
<div class="slide">
  <ul>
  <li><img src="france.cooking.jpg" /></li>
  <li><img src="italian.cooking.jpg" /></li>
  <li><img src="spain.cooking.jpg" /></li>
</ul>
</div>
</header>
<hr>

<p class="text" style="position:absolute;z-index:100;">pre</p>


<script src="port2.js"></script>
  </body>
</html>

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

回答1件

こんばんは。

"$img:first-child"は文字列リテラルなので、そのまま$img:first-childと解釈されます。変数展開をするならば、テンプレートリテラルなのですが、jQオブジェクトを文字列にしても、想定している動作にはならないと思います。

コンテキストを使ってはいかがですか？

jQuery( selector [, context ] ) | jQuery() | jQuery API Documentation

追記

あー、いや、普通にeq()の方が楽そうですね。

.eq() | jQuery API Documentation

.eq() | jQuery API Documentation

投稿2020/08/25 09:20

編集2020/08/25 09:34

Lhankor_Mhy

総合スコア36960

vxbyMrLvglvsKXs

2020/08/25 09:44

なるほど。ありがとうございます。私なりに参考にして以下のコードに書き換えたのですが、１枚目の写真を表示させるにはどのように打てばいいですか？頼りっきりにしてすいません。。主な変更点は、 $img→slide img eqの追加です。 $(function(){ const $img= $('.slide img') $('.slide img:nth-child(n+2)').hide(); setInterval(function(){ $('.slide img').eq(2).fadeOut(2000); $('.slide img').eq(1).fadeIn(2000); $('.slide').appendto('.slide img:first'); },3000); $('.text').text("active"); });

Lhankor_Mhy

2020/08/25 09:54

eqは0からのインデックスなので、1番目は0です。

vxbyMrLvglvsKXs

2020/08/25 11:32

１番目の写真（0)と２番目の写真（１）が交互に出てきて、１枚目　２枚目　３枚目と切り替わりません。無限にリピート　順番に写真を出す　この二つを同時に行うにはどのようにすれば良いのでしょうか？

Lhankor_Mhy

2020/08/25 12:00

appendto が typo では？

vxbyMrLvglvsKXs

2020/08/25 12:41

typoに変えましたがダメでした。コードを全て一掃して、以下のものでおこなったのですが、今度はjsが起動しなくなりました。写真はfoo1.jpg/food2.jpg/food3.jpg を使用したいです。ーーーーHTMLーーーー <div class="slide"> <img src="food1.jpg"/> </div> ーーーーーjsーーーーー $(function(){ i = 1; setInterval(function(){ $(".slide").children("img").attr("src","food" + i + ".jpg"); if(i <= 2){ i++; } else{ i = 1; } } },2000); $('.text').text("active"); });

Lhankor_Mhy

2020/08/25 13:13

typoに変えてどうすんですか…… 「打ち間違い」って意味ですよ。 https://wa3.i-3-i.info/word1675.html

Lhankor_Mhy

2020/08/26 00:40

> 今度はjsが起動しなくなりました。文法エラーが出てますよ。エラーメッセージを確認してください。

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