Question

我有一个问题，希望有人可以帮助我

我有这个脚本：

档案 test.php ：

<script>
  $(document).ready(function() {
        var min_chars = 1;
        var characters_error = 'Write at least '+ min_chars +' character';
        var checking_html = 'Getting information...';

        $('#get_information').click(function(){
            if($('#idprice').val().length < min_chars){
                $('#results_gotten').html(characters_error);
            }else{          
                $('#results_gotten').html(checking_html);
                check_availability();
            }
        });
  });

function check_availability(){
        var idprice = $('#idprice').val();
        $.get("check_idprice.php?id="+$("#idprice").val(), function(data){
                $("#results_gotten").html(data);
                $("#results_gotten").show();
            });
}
</script>

<input name="idprice" type="text" id="idprice" />
<input type="button" id="get_information" value="Checar"><br>
<div id="results_gotten"></div>

第二个文件 check_idprice.php

if (isset($_GET['id'])) { $id = $_GET['id']; } else { die ('No information'); }
$result = mysql_query("SELECT * FROM `sm_prices` WHERE `productid` = '". $id ."'");
$noresults = mysql_num_rows($result);
if($noresults > 0){
    echo $noresults." found";
}else{
    echo "No results found";
}

它完美无缺，你可以在这里看到它：

http://www.enteratenorte.org/starmexico/test.php（您可以搜索 15-1 以获得结果）

或在这里： http://jsfiddle.net/EnterateNorte/hpT66/（因为需要DB而不会得到任何结果）

但是，我想在同一个test.php文件中有多个filds，如下所示：

<input name="idprice1" type="text" id="idprice1" />
<input type="button" id="get_information1" value="Check"><br>
<div id="results_gotten1"></div>

<input name="idprice2" type="text" id="idprice2" />
<input type="button" id="get_information2" value="Check"><br>
<div id="results_gotten2"></div>

<input name="idprice3" type="text" id="idprice3" />
<input type="button" id="get_information3" value="Check"><br>
<div id="results_gotten3"></div>

可能是3个或更多字段

如何使用单一代码实现这一目标？

Answer 1

您可以将每个块包装在父DIV中：

<div class="retrieveInfo">
    <input name="idprice1" type="text" id="idprice1" class="retrieveInfoText" />
    <input type="button" id="get_information1" class="retrieveInfoSubmit" value="Check"><br>
    <div id="results_gotten1" class="retrieveInfoResults"></div>
</div>

然后你的JS看起来像这样：

<script>

$(document).ready(function() {
    var min_chars = 1
    , characters_error = 'Write at least '+ min_chars +' character'
    , checking_html = 'Getting information...'
    , infoContainer = $('.retrieveInfo'); // this selects all the containers with this css class

    /// now you can loop through each of the containers found...
    infoContainer.each(function(){
        var self = $(this) // $(this) refers to the current "container"
        , infoSubmit = self.find('.retrieveInfoSubmit') // find button
        , infoText = self.find('.retrieveInfoText') // find text box
        , infoResults = self.find('.retrieveInfoResults'); // find result div

        // since this is a loop, this click handler will be attached to all buttons found
        infoSubmit.click(function(e){
            // stop the browser from submitting the form (default action)
            e.preventDefault();                

            // check if the info validates
            if( infoText.val().length < min_chars){
                infoResults.html(characters_error);
                // returning here will stop execution of the function, no need for else
                return false;
            }

            infoResults.html(checking_html);
            // modified the funciton to accept some arguments
            check_availability(infoText.val(), infoResults);
        });
    });

});

/**
 * checkVal is the user input
 * resultDiv is the jQuery object that points to the results for this container
 */
function check_availability(checkVal, resultDiv){
    $.get("check_idprice.php?id=" + checkVal, function(data){
            resultDiv.html(data).show();
    });
}

</script>

Answer 2

尝试与以下内容类似的内容

for(var i=0;i<3;i++) {
      $('#get_information'+i).click(function(){
        if($('#idprice'+i).val().length < min_chars){
            $('#results_gotten'+i).html(characters_error);
        }else{          
            $('#results_gotten'+i).html(checking_html);
            check_availability(i);
        }
    });
}

function check_availability(i){
    var idprice = $('#idprice'+i).val();
    $.get("check_idprice.php?id="+$("#idprice"+i).val(), function(data){
            $("#results_gotten"+i).html(data);
            $("#results_gotten"+i).show();
        });
 }

对多个表单输入多次使用一个jQuery函数

2 个答案: