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');
    });
});

Answer 2

或者使用它来获得更好的性能

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