

クリックした画像をコールバック関数とアニメーションを使って変更させたいです。  
以下のコードだとリストの画像をクリックするとアニメーションは適用されているのですが、画像は初期値のsample1が表示され画像の変更ができないです。  
どうすればクリックした画像に変更できるでしょうか？

[code]

    <body>
            <main>
                <h1>表示したい画像をクリックしてください</h1>
                <img id="image" src="sample1.jpg" alt="sample1">
                <div id="display">
                    <ul id="image_list">
                        <li><a href="sample1.jpg"><img src="sample1.jpg" alt="sample1"></a></li>
                        <li><a href="sample2.jpg"><img src="sample2.jpg" alt="sample2"></a></li>
                        <li><a href="sample3.jpg"><img src="sample3.jpg" alt="sample3"></a></li>
                    </ul>
                </div>
                <script src="jquery-3.6.0.min.js"></script>
                <script src="changeImg.js"></script>
            </main>
        </body>
    
[/code]

[code]

    "use strict"
    $(document).ready( () => {
        $("#image_list a").click( evt => {
            let newImage = $("#image_list a").attr("src");
            evt.preventDefault();
            $("#image").animate({opacity: 0, "margin-left": "-100"}, 1000,
            () => {
                $("#image").attr("src", newImage).animate({
                opacity: 1, "margin-left": "+=100"}, 1000
                );
            });
        }) 
    });
    
[/code]


CC BY-SA 4.0
2022-08-02T10:12:11.340
90338
2022-08-02T22:50:12.297
2022-08-02T16:32:48.277
3060
42164
question
javascript html jquery
クリックした画像を変更したい

[code]

            let newImage = $("#image_list a").attr("src");
    
[/code]

`<a>` に `src` 属性がないから `newImage` が空になっているのでしょう。`href` 属性に変えるか、属性を取る対象を `<a>`
の子供の `<img>` にすることが必要です。

また、`$("#image_list a").attr()` と書くとクリックされた `<a>`
を無視してマッチする最初の要素から属性を取得します。`evt.target` を使いましょう。


CC BY-SA 4.0
2022-08-02T22:50:12.297
90345
2022-08-02T22:50:12.297
3475
90338
answer