jQuery：通過點擊問題在php中生成的問答列表中切換答案的可見性

我有一個由Q生成的Q &的列表。常見問題中的問題和答案的數量將是可變的。用JavaScript我想切換答案的可見性，所以當用戶點擊問題時，它將被顯示。用PHP我可以計算問題和答案，並使用計數整數來分配一個id或鏈接到問題或類/ id或錨點的答案。但是我不知道如何生成一個單獨的JavaScript相同的計....我不是太精明的JavaScript :(jQuery：通過點擊問題在php中生成的問答列表中切換答案的可見性

echo'<dl id="faq-list">'; 
$i = 1; 
foreach(get_field('faq_qa') as $faq) : 
    $count = $i++; 
    echo'<dt class="question"><a href="#answer-'.$count.'">'.$faq['faq_question'].'</a></dt><dd class="answer answer-'.$count.'">'.$faq['faq_answer'].'</dd>'; 
endforeach; 
echo'</dl>';

來源

2012-01-30 unfulvio

假設你的HTML結構不會改變，你可以綁定一個click事件處理程序dt元素，只是顯示下面的兄弟（在dd）：

$(document).ready(function() { 
    $("#faq-list").on("click", "dt.question", function() { 
     $(this).next().show(); 
    }); 
});

上述要求的jQuery 1.7+，因爲它使用的on方法如果您使用的是舊版本，看看delegate ，或者只是使用click。

我選擇了父元素#faq-list，並在那裏綁定了事件處理函數，因爲它比將多個事件處理函數綁定到所有單獨的dt元素更有效。這樣，就有一個事件處理程序檢查事件是否來自匹配的元素dt.question。這是可能的，因爲事件從它們起源的地方起泡了DOM（事件起源於dt，並且起泡到父母，這是#faq-list）。

來源

2012-01-30 09:24:45

假設你所有dd的元素以根據頁面加載CSS隱藏，試試這個：

$(function() { 
    $('dt.question').on('click', function() { 
     $(this).next().toggle(); 
    }); 
});

來源

2012-01-30 09:24:56

你可以使用一些jQuery的

$('#question-1').click(function() { 
    $('.answer-1').show('slow'); 
});

但是你也需要識別與你的問題這樣的唯一ID

<dt class="question question-'.$count.'">

來源

2012-01-30 09:26:08 Mike

這也是我的想法，我的代碼中有$ count，因爲您可以看到ab OVE;但是我不確定如何在JavaScript中「計數」;如果我按照上面的建議使用jquery函數，是不是隻適用於問題/答案集＃1？如果我有8個QA，怎麼樣？或20？或32？等等。 – unfulvio 2012-01-30 09:30:21

@Fulvio - 你不需要在你的JS中「數」它們。看到我的答案，它將與所有問題/答案集一起工作，無論有多少。 – 2012-01-30 09:31:32

您需要動態設置1到8或20的數字。 – Mike 2012-01-30 10:12:11

jQuery：通過點擊問題在php中生成的問答列表中切換答案的可見性

回答

相關問題