Jquery中根据条件选择随机值

select random value based on condition in Jquery

本文关键字：选择 随机 条件 Jquery      更新时间：2023-09-26

请参阅以下HTML 

<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>

选择小于623的随机值，并且该随机值不在元素的停止样式中，即不在30,60,80,100,200中。但是这些值会改变。这个随机值至少要比最大值大30。如何做到这一点. 

<!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>

上面的

是完整的工作代码，但它可以更完善。我相信这会对你有帮助的。

相关文章：