JQuery-da bir nechta yorliqning fon rangini o'zgartirish

After answer is clicked, I am trying to change background colour: If the answer is true then only its background colour need to be changed green and if it is wrong; changing background colour of correct answer as green and selected input as red. I could make it for the first question but then it does not work for changing background of true answers in the next questions as green. Here is my codes: [jsfiddle]https://jsfiddle.net/zftbgoa5/1/

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

   jQuery(document).ready(function(){
    jQuery('input[data-key="a"]').click(function(){
    if (jQuery(this).is(':checked')) {
      $(this).closest("label").css("background-color", "red");
      jQuery("#true").css("background-color", "green");
    }
         });
  jQuery('input').click(function(){
    if (jQuery(this).is(':checked')) {
         jQuery("#true").css("background-color", "green");
    }
        });
  jQuery('input[data-key="c"]').click(function(){
    if (jQuery(this).is(':checked')) {
    $(this).closest("label").css("background-color", "red");
    } document.getElementById("true").style.backgroundColor = "green";});
  jQuery('input[data-key="d"]').click(function(){
    if (jQuery(this).is(':checked')) {
      $(this).closest("label").css("background-color", "red");
    }
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="questionContainer hide">
    <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
  </div>
  
 </div>
 <div class="questionContainer hide">
   <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
   
             
  </div>
</div> </div>

0
Bir sinfni yaxshiroq yaratib, uni tayinlang
qo'shib qo'ydi muallif Álvaro Touzón, manba
Siz bir xil sahifada bir xil marta id dan foydalana olmaysiz. Bu erda siz rost kodini bir nechta noto'g'ri kod sifatida ishlatasiz.
qo'shib qo'ydi muallif aavrug, manba
Ikki yoki undan ortiq joylarda id dan foydalanish yomon amaliyotdir. Sizning holingizda id = "true" bir necha marta ishlatiladi. Buning o'rniga class dan foydalaning.
qo'shib qo'ydi muallif Hristiyan Dodov, manba

9 javoblar

Updates Fiddle

Oddiy teg tagida rost mavjud bo'lsa, uni o'zgartirish tekshiring. Agar u qizil bo'lmasa va haqiqiy yorliqni topib, rangi yashil bo'lsa.

$(document).ready(function(){
$('input[type="radio"]').change(function(){
    if (!$(this).closest('label').hasClass('true')){
         $(this).closest("label").css("background-color", "red");
         $(this).parents('.answers').find("label.true").css("background-color", "green");
    } else{
       $(this).closest("label").css("background-color", "green");
  }
 });
});
1
qo'shib qo'ydi
Bilaman, men faqatgina uning savoliga o'xshashini xohlagan edim. Shunung uchun. Hozir uni tahrir qildim.
qo'shib qo'ydi muallif locateganesh, manba
Qizig'i shundaki, qizil rangni birinchi marta yashil rangga aylantiring ... yaxshi amal emas
qo'shib qo'ydi muallif Luminous_Dev, manba

Bu sizga kerakmi? Agar siz to'g'ri javobni tanlasangiz, u yashil rangga aylanadi. Agar noto'g'ri tugmani bosgan bo'lsangiz, u qizil rangga aylanadi va to'g'ri javob yashil rangda yonadi.

To'g'ri javobni aniqlash uchun darslardan foydalanaman va siz ham kerak. Xuddi shu kodga ega bo'lgan id bir nechta joy juda yomon.

Bundan tashqari jQuery'dan foydalanish uchun jQuery yoki $ dan foydalaning. Xuddi shu narsa ham xuddi shunday. Ikkalasidan bittasini faqat bitta kod yordamida qo'llash yanada izchil va oson bajariladi.

Caching elements is also important. Look at clickedLabel = $(this).parent(). I store the

</div>
<div class="questionContainer hide">
  <!-- Question2-->
  <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
  
</div>
</div> </div>
1
qo'shib qo'ydi
Yordam uchun tashakkur! O'rganish uchun ko'p narsalar bor! tabriklar ...
qo'shib qo'ydi muallif Huseyin, manba
I have solution for you

jsfiddle

jQuery was not working properly for you. I have shorten it up.

Agar men ko'proq vaqt sarf qilsam, uni yanada yaxshiroq qila olaman, ammo sizning muammoingizni hal qildim

1
qo'shib qo'ydi
Ushbu kod standartni buzadi. Bir nechta id.
qo'shib qo'ydi muallif Lara Belle, manba
Ajoyib ish! (+1) siz uchun.
qo'shib qo'ydi muallif Lara Belle, manba
@LaraBelle ma'lumotlar atributlariga o'zgartirildi
qo'shib qo'ydi muallif Luminous_Dev, manba
Rahmat! ajoyib yechim!
qo'shib qo'ydi muallif Huseyin, manba

Birinchidan, men sizning formatlashni radio kirish uchun to'g'ri html yozish uchun o'zgartirishni tavsiya qilaman. keyin JS kodi. id haqiqiyligini olib tashlang, chunki u noto'g'ri. Buning o'rniga men sinfdan foydalanardim. Har bir javob bo'yicha men to'g'ri javob va foydalanuvchi javobini aniqlayman. natijani taqqoslash.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

jQuery(document).ready(function(){
           
         
           
           $('input[type="radio"]').on('change', function() {
           
           var answerInput = $(this).closest('ul.answers').find('li label.true input');
           var selectedInput = $(this).closest('ul.answers').find('input[type="radio"]:checked');
           
            if(selectedInput.val() != answerInput.val()){
              $(selectedInput).closest('label').css("background-color", "red");//wrong answer
              $(answerInput).closest('label').css("background-color", "green");//correct answer
            }else{
             $(selectedInput).closest('label').css("background-color", "green");//correct answer
            }
            
          });
           
           });
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionContainer hide">
                <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
                </div>
          
            </div>
                   <div class="questionContainer hide">
        <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
                
             
        </div>
        </div>
</div> </div>

0
qo'shib qo'ydi

Muammoni hal qilish uchun o'zgartirish kerak bo'lgan ikkita muhim narsa bor.

One - It's a radio button. Hence only one of the each answers needs to be checked at a time. But currently you can click and check all the answers under each question at the same time which is incorrect.

Buni tuzatish uchun name xususiyati yordamida har bir savol ostida radio tugmalarini guruhga kiritishingiz kerak:

    

Xuddi shu tarzda har bir guruhga tegishli radio yozuvlarni o'z guruhiga (savollariga) name qo'shing.

Two - Your jQuery obviously needs improvements.

$(document).ready(function(){
  $('input').click(function() {
    var closestLabel = $(this).closest("label");
    var currentQuestion = $(this).closest(".answers")

   //to clear all previous selections bg color
    currentQuestion.find('label').css("background-color", "initial");

    if (closestLabel.hasClass('true')) {
     //if checked is correct
      closestLabel.css("background-color", "green");
    } else {
     //if checked is wrong, find the correct under this question
      currentQuestion.find('.true').css("background-color", "green");
     //currently checked to background red
      closestLabel.css("background-color", "red");
    }
  });
});

id o'rniga class = "rost" foydalaning

Bu erda Fiddle

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

$(document).ready(function(){
  $('input').click(function() {
        $(this).closest(".answers").find('label').css("background-color", "initial");
    if ($(this).closest("label").hasClass('true')) {
      $(this).closest("label").css("background-color", "green");
    } else {
      $(this).closest(".answers").find('.true').css("background-color", "green");
      $(this).closest("label").css("background-color", "red");
    }
        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionContainer hide">
                <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
                </div>
          
            </div>
                   <div class="questionContainer hide">
        <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
                
             
        </div>
               <div class="questionContainer hide">           
        <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div>
        
        </div> 
                   <div class="questionContainer hide">
        <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div>
      
        </div>
</div> </div>

0
qo'shib qo'ydi
Yaxshi fikr .. javob yangilandi
qo'shib qo'ydi muallif Nikhil Nanjappa, manba
Buni bir necha marta ishlatganingiz uchun DOMga kerakli qo'ng'iroqlarni amalga oshirganingiz uchun $ (this) .closest ("label") ni saqlashingiz kerak.
qo'shib qo'ydi muallif Hristiyan Dodov, manba

Bu kerakli bo'lmagan JS kodini olib tashlashga harakat qiling va endi bu o'zgarishlarning hammasi ishlaydi. Bundan tashqari, ul yorlig'i uchun id qo'shildi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    $('input').click(function(){
      var id = $(this).closest(".answers").attr('id');
      if ($(this).is(':checked'))
      {
        if ($(this).closest("label").attr('data-answer')) {
          $(this).closest("label").css("background-color", "green");
        } else {
          $(this).closest("label").css("background-color", "red");
              $('#'+id+' label[data-answer="true"]').css("background-color", "green");
        }
      }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionContainer hide">
    <!-- Question1-->
    <div class="question">Airbus 300-600 tipi uçağın menzili ne kadardır?</div>
    
</div>
<div class="questionContainer hide">
    <!-- Question2-->
    <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
      
    </div>
</div>
</div> </div>

0
qo'shib qo'ydi

Kirish radiokanallarini boshqarish uchun id xususiyati va xususiyatini bir xil string bilan belgilash kerak (savol1 va savol2 bu erda). Belgilangan kiritilgan qiymat faqat serverga yuboriladi.

Javob berishga hodisani kiritish shart emas, faqatgina bitta mantiq bilan kifoyadir.

HTML-kodda yaxshi javobning bu yondashuviga ehtiyot bo'ling, html DOMni ishlab chiquvchi vositasiga qaraydigan har bir foydalanuvchi qaysi variantni yaxshi deb biladi!

Serverga yaxshi natijalarni yuborish uchun yaxshiroq (ajaxli qo'ng'iroq). Lekin bu amalga oshirish uchun ko'proq vaqt talab etadi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

jQuery(document).ready(function(){
 //Add a click event on all input radio
  jQuery('input[type="radio"]').click(function(){
    var inputEvent = jQuery(this);
   //Check if clicked input is checked
    if (inputEvent.is(':checked')) {
     //Check if clicked input is good answer
      if (inputEvent.prop('good-answer') === true) {
       //Set click input parent label in green
        inputEvent.closest("label").css("background-color", "green");
      } else {
       //Set click input parent label in red
        inputEvent.closest("label").css("background-color", "red");
       //Set good-answer parent label to green
        inputEvent.closest("ul").find('.good-answer').closest("label").css("background-color", "green");
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="questionContainer hide">
  <!-- Question1-->
  <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?</div>
  
</div>
<div class="questionContainer hide">
  <!-- Question2-->
  <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
  
             
</div>
</div> </div>

0
qo'shib qo'ydi
  • Birinchidan, radio tugmachasiga nom atributini qo'shing, shunda faqat bitta radio tugmasi tanlanishi mumkin.
  • jQuery'da bosilgan kirish qutisi ota-onasini toping va u "haqiqiy" sinfga ega ekanligini tekshiring.
  • Noto'g'ri javob tanlangan bo'lsa, ul.answers topib, keyin label.true ni topish uchun find() dan foydalaning. (
  • ).
  • Javobni tanlaganingizdan so'ng, aniq javobni tanlash uchun faqat bitta marta barcha radio tugmalarini o'chirib qo'ying.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {

  $("input").click(function() {

    var parentLabel = $(this).parent();

    if (parentLabel.hasClass("true")) {
      parentLabel.css("background-color", "green");
      parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true");
    } 
    else {
      $(parentLabel).parents ("ul.answers").find("label.true").css("background", "green");
      parentLabel.css("background", "red");
      parentLabel.parents ("ul.answers").find ("input").prop ("disabled", "true");
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionContainer hide">
    <!-- Question1-->
    <div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
    </div>
    
</div>
<div class="questionContainer hide">
    <!-- Question2-->
    <div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
    
</div>
</div> </div>

0
qo'shib qo'ydi

Iltimos, buni sinab ko'ring

<div class="questionContainer hide">
    <!-- Question1--><div class="question"> Airbus 300-600 tipi uçağın menzili ne kadardır?
    </div>
      
        </div>
           <div class="questionContainer hide">
    <!-- Question2--><div class="question">Airbus 300-600 uçağının maksimum yakıt hariç yükü nedir?</div>
        
             
</div>
           <div class="questionContainer hide">           
    <!-- Question3--><div class="question">Airbus 300-600 uçağının yüksekliği nedir?</div>
    
</div> 
           <div class="questionContainer hide">
    <!-- Question4--><div class="question">Airbus 300-600 uçağının maksimum yakıt kapasitesi nedir ?</div>
  
</div>     

va jQuery ichida

   jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){

if (jQuery(this).is(':checked'))
{
//alert($(this).attr('data-key'));
 if($(this).attr('data-key')=='wrong')
 {
  $(this).closest("label").css("background-color", "red");
  $(this).closest(".answers").find('.correct').css("background-color", "green");
  }
 else
 {
  $(this).closest("label").css("background-color", "green");
  }
}
 });

});

0
qo'shib qo'ydi
uning batafsil ma'lumotini o'qib chiqsangiz, noto'g'ri tanlangan bo'lsa, uni to'g'ridan-to'g'ri ko'rsatishingiz kerak. Va sizning kodingiz yo'q
qo'shib qo'ydi muallif Luminous_Dev, manba
yuqoridagi kodni ko'ring .......
qo'shib qo'ydi muallif Shibon, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb