在jQuery中翻转闪存卡

我不熟悉jQuery。我正试图使它，使闪存卡翻转时，点击

jQuery代码

$(document).ready(function () {
    $("div").click(function () {
        $(this).next().toggleClass("hidden");
    });
});

相关PHP代码

#returns the HTML out for the cards based on the two input arrays
            function get_cards_html($terms, $answers) {
                $number_of_cards = count($terms);
                for($i = 0; $i < $number_of_cards; $i++) {
                ?>
                <div class="card">
                    <p class="term"><?php echo $terms[$i]?></p>
                    <p class="answer" class="hidden"><?php echo $answers[$i]?></p>
                </div>
                <?php
                }
            }
        ?>

现在，我的代码在单击下一个div时作用，而不是在div内的段落上。我的目标是让div内的文本在显示之间交替。我认为这样做的一个好方法是应用一个隐藏类并使用toggleClass函数，但它似乎没有像我预期的那样工作。

试试看

<div class="card">
    <p class="term">t1</p>
    <p class="answer hidden">a1</p><!-- you had 2 class attributes here, merge them to 1 with space as a separator-->
</div>

---

演示：

哦，有不止一种方法可以做到这一点。我建议如下。试试看是否适合你的场景

$(".card .term").click(function () {
    $(this).next().toggle();
});

jQuery(function ($) {
    //target the term element instead of card then toggle the next element's class
    $("div.card .term").click(function () {
        $(this).next().toggleClass("hidden");
    });
});

$(".card .term").click(function () {
    $(this).next().toggle();
});