Блог

Главная - Вопросы по программированию - Построение викторины на Javascript: Выберите только один из динамических элементов плюс возможность изменить выбор

Построение викторины на Javascript: Выберите только один из динамических элементов плюс возможность изменить выбор

#javascript #html #jquery

Вопрос:

Я пытаюсь построить тест из 30 вопросов с динамически генерируемыми элементами.

html:

   <div class="secondBox">
           <div class="questionBox">
           </div>
            
  </div>

Вот мой сценарий:

 
function showQuestion(){
    for(let i = 0; i < QuesPartA.length; i  ){
      $(".questionBox").append('<div class="Question">Number '  parseInt(i 1)  '</div>');
      QuesPartA[i]['option'].forEach(option => {
          $(".questionBox").append('<span class="pilihan">' option  ' </span><br>');  
      });
     
  } 

$(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>');
  };

$(".questionBox").on("click", ".pilihan", function() {
  $(this).css("background", "red");
  $('.pilihan').not(this).css("background", "#ccc");

Таким образом, динамически сгенерированный элемент покажет 30 вопросов с четырьмя вариантами ответов каждый. Я хочу изменить цвет опции на красный, как только пользователь нажмет, плюс с возможностью изменить выбор.

Я могу сделать это с помощью приведенного выше кода: я могу выбрать ответ на вопрос № 1 (один из вариантов меняется на красный), но когда я нажимаю на ответ на номер 2, выбранный вариант в вопросе 1 возвращается к #ccc цвету. То же самое происходит, когда я выбираю вариант в вопросе 3, выбранные ответы для чисел 2 и 1 возвращаются #ccc .

У кого-нибудь есть какие-нибудь идеи, чтобы каждый раз, когда я нажимаю на ответ на следующий вопрос, предыдущие оставались красными?

Заранее спасибо.

Ответ №1:

Я считаю, что .not() всегда терпит неудачу в этой линии:

 $('.pilihan').not(this).css("background", "#ccc");

Что приводит к изменению фона на #ccc .

Попробуйте просто удалить всю эту строку…

 $('.pilihan').not(this).css("background", "#ccc");

Это также должно привести к тому, что любая линия, которая была окрашена в красный цвет, останется красной.

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

1. Причина, по которой я поставил эту строку, заключается в том, чтобы предоставить пользователям возможность изменять свой выбор. Без $('.pilihan').not(this).css("background", "#ccc"); пользователей они не могут изменить свой выбор, но в конечном итоге добавляют еще один выбор. Другими словами, в одном вопросе будет больше вариантов с красным цветом. Что я хочу сделать, так это дать возможность изменить выбор, но ограничить только один выбор (один красный) в одном вопросе.

2. @Ciptaning — попробуйте это $('.pilihan').not(this).siblings().css("background", "#ccc");

3. @Ciptaning — Было бы полезно просмотреть ваш html.

4. Спасибо за вашу помощь`, ` $(‘. pilihan’).не(это). братья и сестры().css(«фон», «#ccc»);« не работает в соответствии с моими намерениями. Это изменяет фон текста «Номер 1, 2 и т.д.» (не выбор), чтобы быть #ccc . Я только что добавил свой html. Еще раз спасибо за вашу помощь, сэр.

Метки: