Question

我有9个类似的代码块，可在单击时切换和添加/删除类。如果我使用这样的ID

$('#js-flip-1').toggle(
            function() {
                $('#js-flip-1 .card').addClass('flipped');
            },
            function() { 
                $('#js-flip-1 .card').removeClass('flipped');
            }
);
$('#js-flip-2').toggle(
            function() {
                $('#js-flip-2 .card').addClass('flipped');
            },
            function() { 
                $('#js-flip-2 .card').removeClass('flipped');
            }
);

但是应该有一些更清洁的解决方案，我想到了$（this），但它似乎不起作用。

$(document).ready(function() {

            $('.flip').toggle(
                function() {
                     $(this).find('.card').addClass('flipped');
                },
                function() { 
                     $(this).find('.card').removeClass('flipped');
                }
            );

});

或mb toggleClass

$( ".flip" ).click(function() {
  $( ".card" ).toggleClass( "flipped" );
});

我当前的HTML结构是这样

<div id="js-flip-4" class="flip">
                    <div class="card">
                        <div class="face front">
                              <img src="">
                        </div>
                        <div class="face back">
                            <h3 class="card-name"><a href=""></a></h3>
                            <p></p>
                        </div>
                    </div>
</div>
<div id="js-flip-5" class="flip">
                    <div class="card">
                        <div class="face front">
                              <img src="">
                        </div>
                        <div class="face back">
                            <h3 class="card-name"><a href=""></a></h3>
                            <p></p>
                        </div>
                    </div>
</div>

感谢您的帮助和提示。

解决方案

这实际上有效，不知道我第一次做错了。

        $('.flip').click(
            function() {
                 $(this).find('.card').toggleClass('flipped');
            }
        );

Answer 1

Thx T.J Crowder，有效

    $('.flip').click(
        function() {
             $(this).find('.card').toggleClass('flipped');
        }
    );

jQuery $（this）而不是多个ID

1 个答案: