заполнить список на основе другого списка

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 classess .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

вы можете использовать classes и выбрать их

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

или, если хотите, можете использовать

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

^= для запуска с.http://api.jquery.com/attribute-starts-with-selector/

Answer 4

Использовать селектор класса вместо идентификатора

$("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>