循环输入项以获得最小值最大值

问题描述：

I have a question about JQuery Min Max Validation looping through dynamic created input items. In my php page i have a dynamic table who loops through the data in the DB. Sometimes i have an table with 3 input Items (Cells) sometimes with 6 or 12 input items. With jquery i found to validate min - max value of data, but it works only for the first input item. How can loop throug all the input item to get the same min max validation?

Here the JQuery code:

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

                var enteredValue = $("input:#value_one").val();
                var min=1;
                var max = 3;
                var num = parseInt(enteredValue);

                if (min > num || max < num) {
                    alert('Number ' + num + ' is not a number between ' + min + ' and ' + max);
                    return false;
                }
        });
    });

Here apart of the PHP HTML Code:

    foreach($datas as $idactivite=>$dat){
        $totalactiv=0;
        $nbdiviseur=0;
        foreach($dat as $dd){
            $totalactiv+=$dd["note"];
            $nbdiviseur++;
        }
        $mamoyactiv=$totalactiv/$nbdiviseur;
        $position=3;
        $mamoyactiv = substr($mamoyactiv, 0, $position);
        $moyenneverticale[$idactivite]=$mamoyactiv;

// Here the input Item who loops through the DB Query to get them values:       

        $htmldroit.="<td id='myguaNote' bgcolor='$bgcolor' align='center'>

        <input name='".$idactivite."_".$idagent."' id='value_one' maxlength='1' class='grand' value='".$dat[$idagent]["note"]."' ></td>";

        $totalfamille+=$dat[$idagent]["note"];
        $TabRes[$ind] += $dat[$idagent]["note"];
        $TabObj[$ind] = "&nbsp;";
        $TabResColor[$ind]=0;

        $ind++;
    }

Somebody any ideas?

THX in advance

我有一个关于循环动态创建的输入项的JQuery Min Max Validation的问题。在我的php页面中，我有一个循环遍历数据库中数据的动态表。有时我有一个包含3个输入项（单元格）的表，有时带有6或12个输入项。使用jquery我发现验证min - 最大值数据，但它只能工作对于第一个输入项目。如何循环通过所有输入项目以获得相同的最小值最大值验证？ p>

这里是JQuery代码： p>

  $（document）.ready（function（）{
 $（“input”）。  click（function（）{
 
 var enteredValue = $（“input：#value_one”）。val（）; 
 var min = 1; 
 var max = 3; 
 var num = parseInt（enteredValue）  ; 
 
 if（min＆gt; num || max＆lt; num）{
 alert（'Number'+ num +'不是'+ min +'和'+ max'之间的数字）; 
返回false  ; 
} 
}）; 
}）; 
  code>  pre> 
 
 这里有一些PHP HTML代码： p> 
 
 
   foreach（$ datas as $ idactivite =＆gt; $ dat）{
 $ totalactiv = 0; 
 $ nbdiviseur = 0; 
 foreach（$ dat as $ dd）{
 $ totalactiv + = $ dd [  “note”]; 
 $ nbdiviseur ++; 
} 
 $ mamoyactiv = $ totalactiv / $ nbdiviseur; 
 $ position = 3; 
 $ mamoyactiv = substr（$ mamoyactiv，0，$ position）; 
 $  moyenneverticale [$ idactivite] = $ mamoyactiv; 
 
 //这里输入 循环通过数据库查询获取值的项目：
 
 $ htmldroit。=“＆lt; td id ='myguaNote'bgcolor ='$ bgcolor'align ='center'＆gt; 
 
＆lt;输入名称 ='“。$ idactivite。”_“。$ idagent。”'id ='value_one'maxlength ='1'class ='grand'value ='“。$ dat [$ idagent] [”note“]。”'  ＆gt;＆lt; / td＆gt;“; 
 
 $ totalfamille + = $ dat [$ idagent] [”note“]; 
 $ TabRes [$ ind] + = $ dat [$ idagent] [”note“];  
 $ TabObj [$ ind] =“＆amp; nbsp;”; 
 $ TabResColor [$ ind] = 0; 
 
 $ ind ++; 
} 
  code>  pre> 
 \  n 有人有什么想法吗？ p> 
 
 
 THX提前 p> 
  div>

答

I think you're not really selecting the input field which was actually clicked.

Replace var enteredValue = $("input:#value_one").val() with

 var enteredValue = $(this).val();

The callback function from click holds a reference to the clicked DOM element in the this keyword. wrap it in $() to make it a jQuery object and finally call val() on it.

Fiddle

Edit: To validate multiple input fields on button click I used a helper class validate. Assuming all input fields you want to validate have this class you can bind some code to submit button's on click:

$("#submitButton").click(function(){
    $(".validate").each(validateField);
});

First all elements having the class validate will be selected and on this collection we call jQuery's each() which takes a function handle as argument. This function (validateField in this case) should take to input arguments (index and element, see the documentation for more details - if you think of a strange for for a "for in"-loop you're not far off.).
I moved the your validation code in this function and simply replaced $(this) by $(element)

Fiddle

答

few tips

if you are working with dynamic data then don't use simple 'click' function, instead try .on ( with jQuery 1.7+)

 $('document').on('click', 'input', function(){

   var enteredValue = $(this).val();
   //your rest of code
});

答

|| if (min > num || max < num) {

change to

// For a number not between min and max
if (num < min || num > max) {

// For a number between min and max
if (num >= min && num <= max) {

For testing:

        <script>

        function test(){

            $html = document.getElementById("msg");

            num = 100;
            min = 10;
            max = 100;

            if (num < min || num > max) {
            $html.innerHTML = "Num is not between min and max";
            return;
            }

            if (num >= min && num <= max) {
            $html.innerHTML = "Num is between min and max";
            return;
            }

        }

        </script>
        <body onload="test()">
        <div id="msg" style="border:1px solid #000000; height:100px">Answer has not been found!</div>
        </body>

答

It sounds like you might be looking for .on(), which will keep things up-to-date as the page changes, whereas the click you have is just on the state of the page when it's created. Try:

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

答

Try this

//========== Prototype to find out min value in an Array=========================

        Array.prototype.min = function() 
        {
            return Math.min.apply(null, this)
        }

//============= Jquery Scripting===================================================

            $selector=$("input");  //Your selector which is cursoring your inputs
            $aryVal=new Array;     //Define an Array
            $selector.each(function() //Iterate to all the input
            {
                $aryVal.push(this.value); //push the value to array
            });

            var min = Math.min.apply(null, $aryVal);  //Getting min value from array
            alert(min);

答

Good practice when creating a dynamic amount of elements which are being used to inject a variable somewhere is:

Give unique ID for identification.
Use CSS class. Class styles are meant to be repeated, ID's are not.

So if I were to generate a number of inputs 1 to 100

for ($i = 1; $i <= 100; $i++)
{
    $IdAndName = "input" . $i;
    echo("<input type='text' id='" . $IdAndName . "' name='" . $IdAndName . "' class='myStyle'/><br>
");
}

Now you would have HTML elements with ID input1 to input100

You can then use the JQuery click event as you have, then use $(this).val() to retrieve it's value on click.

循环输入项以获得最小值最大值

相关推荐