मेरे पास एक लूप में एक jQuery addClass फ़ंक्शन है जो मुझे किसी अजीब कारण से काम करने के लिए मिल सकता है, यह मेरे फ़ॉन्ट विस्मयकारी स्टार को सुनहरा रंग देना चाहिए। लूप बिना किसी समस्या के काम करता है, मैंने कंसोल के साथ पुष्टि करने के लिए इसका परीक्षण किया। यह जांचने के लिए कि यह सभी आवश्यक पूर्णांकों के माध्यम से लूपिंग कर रहा है। साथ ही, addClass फ़ंक्शन ठीक काम करता है जब यह स्वयं होता है, मैंने eq चयनकर्ता को हार्ड कोडिंग करके इसका परीक्षण किया। लेकिन जब मैं दोनों को मिलाता हूं, तो यह काम करना बंद कर देता है। मैं समस्या को कम करने के लिए इस फ़ंक्शन को और सरल नहीं बना सकता और मुझे इस समस्या के लिए कंसोल पर कोई समस्या लॉग नहीं दिखाई दे रही है।

$(".star").on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)
  var totalstars = $(".stars").children().length

    $(".golden").css("color","gold")

    // $(".star:eq(1)").addClass('golden');
      
    for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(".star:eq(i)").addClass('golden');
    }

})
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Star rating Demo</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
  </head>

  <body>

    <h1>Star rating test</h1>

    <div class="stars">
      <i class="star fa fa-star fa-fw" title='Poor' data-value='1'></i>
      <i class="star fa fa-star fa-fw" title='Fair' data-value='2'></i>
      <i class="star fa fa-star fa-fw" title='Good' data-value='3'></i>
      <i class="star fa fa-star fa-fw" title='Excellent' data-value='4'></i>
      <i class="star fa fa-star fa-fw" title='WOW!!!' data-value='5'></i>
    </div>

  </body>
 
</html>
1
user3655574 21 अक्टूबर 2018, 09:20

2 जवाब

यहां कक्षा जोड़ने के लिए नीचे दिए गए कोड का उपयोग करें fiddle link है:

  $(".star").on('click', function(){

  var starvalue = parseInt($(this).data('value'), 10)

  var totalstars = $(".stars").children().length

   // $(".golden").css("color","gold")
    $(".star").removeClass('golden')
    // $(".star:eq(1)").addClass('golden');

    for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(".star:eq("+i+")").addClass('golden');
    }

})

यहां सीएसएस कोड:

.golden{
  color:#DAA520;
}

जब आप अन्य तारे पर क्लिक करेंगे तो यह कक्षा को भी हटा देगा और इसे आपकी आवश्यकता के अनुसार बना देगा।

1
vishu minhas 21 अक्टूबर 2018, 06:48

इसे आज़माएं (मैंने टेम्प्लेट लिटरल्स का उपयोग किया है जो सब कुछ और अधिक पठनीय बनाता है, ध्यान दें कि यह केवल ES6 समर्थित ब्राउज़रों पर काम करता है):

for (i = 0; i < starvalue; i++) {
      console.log(i)
      $(`.star:eq(${i})`).addClass('golden');
      // Note that I have used backticks - ``
}
1
Nir Tzezana 22 अक्टूबर 2018, 15:43