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设置为answer元素的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/

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

4 个答案: