在其他列表的基礎上填充列表

Question

好的，所以我有一個像兩個div的結構。在左邊的div裏我有一個10個問題的列表，在右邊我想填充同樣的答案。在點擊左側的question1時，答案應該顯示在右側。在點擊第二個問題時，應該顯示第二個答案，隱藏所有答案。那麼在jquery中完成它的理想方式是什麼？ 我寫過類似的東西;

$("document").ready(function() { 
    $("#idQ1").click(function() { 
    $("#ansQ1").css("display","block"); 
    $("#ansQ1,#ansQ2,#ansQ3,#ansQ4,#ansQ5,.......#ansQ10").css("display","none"); 
}) 
}) 

但我不認爲這段代碼是好的。有人可以指導你如何使用循環或函數來做到這一點

Answer 1

其他的答案是死在使用類撰寫對這一

我已經在這裏創造我自己的例子，它使用的錨標籤與href集問題的一個標識的有效腳本答案元素。這裏

例如：http://jsfiddle.net/pxfunc/zEwUB/

HTML：

<div id="container"> 
    <div id="questions"> 
     <a href="#answer1">Question 1?</a> 
     <a href="#answer2">Question 2?</a> 
     <a href="#answer3">Question 3?</a> 
    </div> 
    <div id="answers"> 
     <p id="defaultText">Click a question to show the answer here!</p> 
     <p id="answer1" class="answer">Answer 1!</p> 
     <p id="answer2" class="answer">Answer 2!</p> 
     <p id="answer3" class="answer">Answer 3!</p> 
    </div> 
</div> 

的jQuery：

$('#questions a').click(function(e) { 
    e.preventDefault(); // prevents the link from changing the URL 

    $('#answers p').hide(); // hide all answers 
    $($(this).attr('href')).show(); // get href attribute to show answer 
}); 

Answer 2

我會添加CSS分類.question和.answer到適當的元素。比你可以這樣做：

$("document").ready(function() { 
    $(".question").click(function() { 
     var questionId = $(this).Id; 
     var answerId = "ans" + questionId.substr(2); 
     $(".answer").hide(); 
     $("#"+answerId).show(); 
    }) 
}) 

HTML， 問題，

<div id='idQ1' class='question'>question 1</div> 

回答

<div id='ansQ1' class='answer'>answer 1</div> 

Answer 3

使用類選擇，而不是ID

$("document").ready(function() { 
    $(" .Questions").click(function() { 
    $(" .answers").hide(); 
    $('#'+$(this).attr('id')+'answer').show(); 
}) 
}) 

HTML， 個問題，

<div id='q1' class='question'>question 1</div> 

回答

<div id='q1answer' class='answer'>answer 1</div> 

Answer 4

可以使用classes並選擇他們

$(".classname").css(...) 

，或者如果你願意，你可以使用

$("[id^='ansQ']").css(...) 

^=是爲了開始。 http://api.jquery.com/attribute-starts-with-selector/