Блог

Главная - Вопросы по программированию - заполните список на основе другого списка

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

#javascript #jquery #css #function #html

Вопрос:

итак, у меня есть структура, похожая на два дива. В левой части div у меня есть список из 10 вопросов, а в правой части я хочу заполнить ответы на те же вопросы. При нажатии на вопрос1 слева ответ должен отображаться в правой части. При нажатии на второй вопрос должен отображаться ответ на второй, скрывающий все ответы. итак, каков был бы идеальный способ сделать это в jquery? Я написал что-то вроде;

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

но я не думаю, что этот код хорош. может ли кто-нибудь подсказать, как бы вы это сделали, используя циклы или функции

Комментарии:

1. что вы сделали до сих пор?? итак, ваш html и jquery на jsfiddle.net

Ответ №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>

Ответ №2:

Другие ответы связаны с использованием классов для написания эффективного сценария для этого

Я создал здесь свой собственный пример, в котором используются теги привязки для вопросов с 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
});

Ответ №3:

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

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

Ответ №4:

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

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

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

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

^= это для начала.
http://api.jquery.com/attribute-starts-with-selector/

Метки: