Question

我正在做一个测验部分，并试图删除其父级动态div的li类

这是我遵循的参考[[https://www.msn.com/en-ie/entertainment/quiz/quiz-how-well-do-you-know-friends/ar-BBsDVvo#page=2] 在这里，我循环了一个div，其中包含一个问题及其四个选项，下面的代码是动态div

测验部分的图片

<div id="login-1">   
   <p>Which of the following ancient Indian sages did not make substantial contribution to the YOGCRA (Yogachara) philosophical tradition?</p> </h3>
      <div class="q-option mtp40">
         <ul>                                         
             <li id="opt-361" data-id="361" class="qoption selected" data-m ="364"> Vasubandhu</li>                                          
             <li id="opt-362" data-id="362" class="qoption" data-m ="364"> Dinnaga</li> 
             <li id="opt-363" data-id="363" class="qoption" data-m ="364"> Dharmakirti</li> 
             <li id="opt-364" data-id="364" class="qoption answered" data-m ="364"> Nagarjuna</li>         
         </ul>
      </div>
</div>

当我单击其相应问题的选项（li）并包含“选择的qoption”或“已回答的qoption”之类的类别时，我想删除该“ qoption”类，以使其无法选择其他任何答案选择一次

这就是我尝试过的

$(document).on('click', '.qoption', function() { 
   var choosedid = $(this).data('id');  
   var correctid = $(this).attr('data-m');                      
   if (choosedid == correctid) {
      $('#opt-'+choosedid).addClass('answered');
   } else {
      $('#opt-'+choosedid).addClass('selected');
      $('#opt-'+correctid).addClass('answered');
   }                           
   $(".next").show();
   var total_question = 3;
   for (i = 0; i < total_question.length; i++) { 
      if( ('#login-'+total_question[i] 'li').hasClass('selected') || $('#login-'+total_question[i] 'li').hasClass('answered')) {
        $('#login-'+total_question[i] 'li').removeClass('qoption');                     
      }
}

Answer 1

嘿，你可以一行完成

$(document).on('click', '.qoption', function() { 
    var choosedid = $(this).data('id');  
    var correctid = $(this).attr('data-m');   

    $('#opt-'+choosedid).removeClass('qoption');

    if (choosedid == correctid) {
        $('#opt-'+choosedid).addClass('answered');
    } else {
        $('#opt-'+choosedid).addClass('selected');
        $('#opt-'+correctid).addClass('answered');
    } 

    $(".next").show();
});

Answer 2

您可以尝试这样的事情

    $(document).on('click', '.qoption', function () {
        var choosedid = $(this).data('id');
        var correctid = $(this).attr('data-m');
        $(this).addClass('selected');
        if (choosedid == correctid) {
            $(this).addClass('answered');
        } 
        $(this).parent().find('li').removeClass('qoption');
        $(".next").show();
    });

jQuery中带有li的动态div ID

2 个答案: