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

  //pageonload mix ordering
  $(document).ready(function() {

    var parent = $("#algoritma");
    var divs = parent.children();
    while (divs.length) {
      parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }

  });

  //when list ordering update
  jQuery(function($) {
    $('.algList').sortable({
      connectWith: '.algList',
      update: function(event, ui) {
        var liste = this.id;
        var order = $(this).sortable('toArray');
        var sira = order.join(';');
        var trueOrder = ["1", "2", "3", "4"];
        var trueSira = trueOrder.join(';');
        console.log(order);
        console.log(trueOrder);

        //compare arrays
        if (JSON.stringify(order) === JSON.stringify(trueOrder)) {
          console.log('They are equal! Congratulations');
        } else {
        
          //i need this part. if two array not equal ordering, true list texts turn to GREEN color and false list texts turn RED color 
          
        }


      }
    });
  });
  body {
    margin: auto;
    width: 600px;
  }

  #algoritma {
    font-size: 24px;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    border: 1px solid #ccc;
    line-height: 35px;
  }

  li {
    list-style-type: decimal;
    border: 1px solid red;
  }
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  
  <ul id="algoritma" class="algList">
    <li id="1">Step #1</li>
    <li id="2">Step #2</li>
    <li id="3">Step #3</li>
    <li id="4">Step #4</li>
  </ul>
1
ozan 27 अक्टूबर 2019, 15:18

1 उत्तर

सबसे बढ़िया उत्तर

आप डायरेक्ट ऐरे इक्वल्स चेक को हटा सकते हैं और कुछ इस तरह कर सकते हैं

  jQuery(function($) {
    $('.algList').sortable({
      connectWith: '.algList',
      update: function(event, ui) {
        var liste = this.id;
        var order = $(this).sortable('toArray');
        var sira = order.join(';');
        var trueOrder = ["1", "2", "3", "4"];
        var trueSira = trueOrder.join(';');
        console.log(order);
        console.log(trueOrder);

        //compare arrays
        for (let i=0; i < order.length; i++) {
            if (trueOrder[i] === order[i]) {
                document.getElementById(i+1).style.color = 'green';
            } else {
                document.getElementById(i+1).style.color = 'red';
            }
        }

      }
    });
  });

साथ ही ऐसे मामले से बचने के लिए जिसमें प्रारंभिक क्रम सही क्रम नहीं है, हम ऐसा कुछ कर सकते हैं। एक नया स्ट्रिंग बनाएं जो सिर्फ ऑर्डर को स्टोर करता है। अगर इस स्ट्रिंग का मान '1234' है, तो पैरेंट को खाली करें और फिर से रैंडमाइज़ करें।

  $(document).ready(function() {
    let parent = $("#algoritma");
    let divs = parent.children();
    let randomOrder = '';
    while (divs.length) {
      const randomDiv = divs.splice(Math.floor(Math.random() * divs.length), 1)[0];
      randomOrder += randomDiv.id;
      parent.append(randomDiv);
      if (randomOrder === '1234') {
        divs = parent.children();
        parent.empty();
        randomOrder = '';
      }
    }
  });
0
Abito Prakash 29 अक्टूबर 2019, 09:50