javascript - JQUERY 旋转 img

Question

我有一个问题

我使用这段代码来旋转我的图像

<script>
                $(document).ready(
                function(){
                    $('.music').click(function() {
                        $(this).parent().find('.musicInfo').toggle();
                        $('.arrow-img').toggleClass('rotate');
                        $('.arrow-img').toggleClass('rotate2');
                    });
                });
        </script>

它可以工作，但它会调低所有图像，但我希望它只旋转所选 div 的图像 这是我的 div/img 部分

<div id="menu-right" class="block">
                        <h1>MEER INFORMATIE</h1>
                            <?php
                                include 'voordelen.php';
                                    foreach ($result as $title) { ?>
                                        <div class='wrapper'>
                                            <div class='music'>
                                                <img id="afb"class="arrow-img rotate2" src="pictures\arrow.png"/>
                                                    <?php
                                                        echo $title['Onderwerp']
                                                    ?>
                                            </div>
                                            <div class='musicInfo'>
                                               <?php
                                                 echo $title['Omschrijving']
                                               ?>
                                            </div>
                                    </div>
                            <?php } ?>
                </div>

看起来这是正常的，没有点击

如你所见，它们同时转动

Answer 1

需要指定要旋转的图片

$(document).ready(function () {
    $('.music').click(function () {
        $(this).parent().find('.musicInfo').toggle();
        $(this).find('.arrow-img').toggleClass('rotate');
        $(this).find('.arrow-img').toggleClass('rotate2');
    });
});