Question

我是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
                }
            }
        ?>

相关CSS代码

.hidden {
    display: none;
}

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

Answer 1

哦，有不止一种方法可以做到这一点。我建议如下。尝试它是否适合您的情况。

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

Answer 2

尝试

<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>

然后

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

演示：Fiddle

在jQuery中翻转闪存卡

2 个答案: