在其他列表的基础上填充一个列表

Question

好的，所以我有一个像两个 div 的结构。在左侧 div 我有一个包含 10 个问题的列表，在右侧我想填充相同的答案。单击左侧的问题 1 后，答案应显示在右侧。单击第二个问题时，应显示第二个问题的答案，并隐藏所有答案。那么在 jquery 中执行此操作的理想方法是什么？ 我写了类似的东西；

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

但我认为这段代码不好。有人可以指导如何使用循环或函数来做到这一点

Answer 1

我会将 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 2

其他答案都是使用类来编写有效的脚本，为此

我在这里创建了自己的示例，该示例使用锚标记来标记问题，并将 href 设置为答案元素的 id。

示例如下： 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 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/