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

我有个问题，希望有人能帮我

我有这个剧本：

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

它工作得很好，你可以在这里看到它的作用：

（您可以搜索15-1以获得结果）

或在此： （由于需要DB，因此无法获得任何结果）

然而，我希望在同一个test.php文件中有多个fild，如下所示：

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

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

它可以是3个或更多字段

---

如何使用一个代码实现这一点？

尝试以下类似的方法

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();
        });
 }

---

for（var i=0；i尝试以下类似的方法

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();
        });
 }

for（var i=0；i您可以将每个块包装在父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可能看起来像这样：

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

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


$（文档）.ready（函数（）{
var min_chars=1
，characters\u error='至少写入'+min\u字符+'字符'
，正在检查_html='获取信息…'
，infoContainer=$（'.retrieveInfo'）；//这将选择具有此css类的所有容器
///现在，您可以遍历找到的每个容器。。。
infoContainer.each（函数（）{
var self=$（this）/$（this）引用当前“容器”
，infoSubmit=self.find（'.retrieveInfoSubmit'）//查找按钮
，infoText=self.find（'.retrieveInfoText'）//查找文本框
，infoResults=self.find（'.retrieveinfo'）；//查找结果div
//由于这是一个循环，因此此单击处理程序将附加到找到的所有按钮
信息提交。点击（功能（e）{
//停止浏览器提交表单（默认操作）
e、 预防默认值（）；
//检查信息是否有效
if（infoText.val（）.长度<最小字符）{
html（字符错误）；
//返回此处将停止函数的执行，不需要其他操作
返回false；
}
html（检查html）；
//修改函数以接受某些参数
检查可用性（infoText.val（），infoResults）；
});
});
});
/**
*checkVal是用户输入
*resultDiv是指向此容器结果的jQuery对象
*/
功能检查\u可用性（检查值、结果IV）{
$.get（“check_idprice.php？id=“+checkVal，函数（数据））{
resultDiv.html（data.show（）；
});
}
您可以将每个块包装在父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可能看起来像这样：

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

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


$（文档）.ready（函数（）{
var min_chars=1
，characters\u error='至少写入'+min\u字符+'字符'
，正在检查_html='获取信息…'
，infoContainer=$（'.retrieveInfo'）；//这将选择具有此css类的所有容器
///现在，您可以遍历找到的每个容器。。。
infoContainer.each（函数（）{
var self=$（this）/$（this）引用当前“容器”
，infoSubmit=self.find（'.retrieveInfoSubmit'）//查找按钮
，infoText=self.find（'.retrieveInfoText'）//查找文本框
，infoResults=self.find（'.retrieveinfo'）；//查找结果div
//由于这是一个循环，因此此单击处理程序将附加到找到的所有按钮
信息提交。点击（功能（e）{
//停止浏览器提交表单（默认操作）
e、 预防默认值（）；
//检查信息是否有效
if（infoText.val（）.长度<最小字符）{
html（字符错误）；
//返回此处将停止函数的执行，不需要其他操作
返回false；
}
html（检查html）；
//修改函数以接受某些参数
检查可用性（infoText.val（），infoResults）；
});
});
});
/**
*checkVal是用户输入
*resultDiv是指向此容器结果的jQuery对象
*/
功能检查\u可用性（检查值、结果IV）{
$.get（“check_idprice.php？id=“+checkVal，函数（数据））{
resultDiv.html（data.show（）；
});
}