Creo un cuestionario web con cada pregunta y elemento de opción generado dinámicamente de acuerdo con una matriz.
A continuación se muestra mi guión:
function showQuestion(){ for(let i = 0; i < QuesPartA.length; i++){ $(".questionBox").append('<div class="Question">Number '+ parseInt(i+1) +'</div>'); $(".questionBox").append('<div class="Options" id="optId'+ parseInt(i+1) +'">'); QuesPartA[i]['option'].forEach(option => { $("#optId"+ parseInt(i+1)).append('<span class ="pilihan'+ parseInt(i+1) +'">'+option +' </span><br>'); }); $(".questionBox").append('</div><br>'); // end Options div } $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>'); }; function changeColor(){ $(".questionBox").on("click", ".pilihan1", function() { $(this).css("background", "red"); $('.pilihan1').not(this).css("background", "#ccc");; }); $(".questionBox").on("click", ".pilihan2", function() { $(this).css("background", "red"); $('.pilihan2').not(this).css("background", "#ccc");; }); $(".questionBox").on("click", ".pilihan3", function() { $(this).css("background", "red"); $('.pilihan3').not(this).css("background", "#ccc");; }); };La primera función es mostrar la pregunta y la respuesta. La segunda es dar color a cada opción cuando el usuario hace clic.
Sin embargo, la segunda función va a ser muy larga ya que el cuestionario consta de 30 preguntas. ¿Hay alguna forma de hacerlo más simple para no tener que escribir 30 delegaciones de eventos?
Puede usar establecer una ID para cada botón
QuesPartA[i]['option'].forEach(option => { $("#optId"+ parseInt(i+1)).append('<span id = "'pilihan'+parseInt(i+1)+'" class ="pilihan'+ parseInt(i+1) +'">'+option +' </span><br>'); });y use esta sintaxis para agregar un evento a todos los botones
function changeColor(){ $(".questionBox").on("click",'[id^=pilihan]', function() { $(this).css("background", "red"); ... });En términos generales, es mejor evitar por completo los atributos incrementales de id y class en bloques repetidos de contenido y, en su lugar, relacionarlos entre sí mediante métodos transversales DOM dentro de los controladores de eventos relevantes.
En este caso, dada la estructura HTML implícita, puede dar a todos los elementos span en los que se puede hacer clic la misma clase y luego find() dentro del div de pregunta principal closest() .
También tenga en cuenta que la lógica se puede hacer más sucinta usando map() para construir el HTML. Prueba esto:
let QuesPartA = [{ option: [ 'Foo', 'Bar', 'Fizz', 'Buzz' ] }]; function showQuestion() { let questionHtml = QuesPartA.map((question, i) => { let optionHtml = question.option.map(opt => `<span class="pilihan">${opt}</span><br />`).join(''); return `<div class="Question">Number ${i + 1}</div><div class="Options">${optionHtml}</div><br />`; }).join(''); $(".questionBox").append(questionHtml); $(".secondBox").append('<a href="Listening Part A.html" class="btnToPartB">Continue to Part B</a>'); }; function changeColor() { $(".questionBox").on("click", ".pilihan", e => { let $opt = $(e.target); $opt.closest('.Options').find('.pilihan').removeClass('active'); $opt.addClass('active'); }); }; showQuestion(); changeColor(); .pilihan { color: #CCC; } .pilihan.active { color: #C00; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="questionBox"></div> <div class="secondBox"></div>