2016-10-24 12 views
0

Sie bitte folgende htmlZufallswert wählen, basierend auf Zustand in JQuery

<div class="testclass" style="top:30px;">msg1</div> 
<div class="testclass" style="top:60px;">msg2</div> 
<div class="testclass" style="top:80px;">msg3</div> 
<div class="testclass" style="top:100px;">msg4</div> 
<div class="testclass" style="top:200px;">msg5</div> 

Zufallswert wählen, dass weniger als 623 und der Zufallswert ist nicht in dem Stop-Stil des Elements, dh nicht in 30,60 sehen, 80,100,200. Aber diese Werte ändern sich. Und dieser zufällige Wert muss mindestens 30 mehr von den höchsten Werten sein. Wie man das macht .

Antwort

3
<!DOCTYPE html> 
<html> 
<head> 
    <title>hello</title> 
</head> 
<body> 

    <div class="testclass" style="top:30px;">msg1</div> 
    <div class="testclass" style="top:60px;">msg2</div> 
    <div class="testclass" style="top:80px;">msg3</div> 
    <div class="testclass" style="top:100px;">msg4</div> 
    <div class="testclass" style="top:200px;">msg5</div> 

    <button>Generate Random number</button> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <script> 

    function isNotValid(arr, val){ // checks if the random value is valid 
     var check = false; 

     $.each(arr, function(v){ 
      if(val < (v+30)){ 
       check = true; 
       return; 
      } 
     }); 

     return check; 
    }  

    function getRandomNum(max, min) { // getting random value 
     return parseInt(Math.random() * (max - min) + min); 
    } 

    $(document).ready(function(){ 
     $("button").click(function(){ 
      var topValues = []; 

      $(".testclass").each(function(){ // stores [30, 60, 80, 100, 200] in topValues variable 
       topValues.push(parseInt($(this).css('top'))); 
      }); 

      var randomValue = 0; 

      do{ 
       randomValue = getRandomNum(623, 0); // max, min for fetching random value. You can pass the smallest topValues as min to optimize the process 
      } while(isNotValid(topValues, randomValue)); // fetch random value until its not valid 


      alert(randomValue); // alert random value 
     }); 
    }); 

    </script> 

</body> 

Obige ist der komplette Arbeits Code, aber es kann mehr poliert werden. Ich bin mir sicher, das wird dir helfen :)

+0

Danke. Es funktioniert. – Dan

+0

herzlich willkommen :) –

Verwandte Themen