在jQuery中翻轉閃存卡

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

喔有超過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