Question

我现在尝试几个小时来调试我的jQuery错误函数（也是成功的）。我不明白如何只在我点击的按钮下方显示错误消息。为了帮助您理解我的问题，我制作了JSFiddle

这是HTLM部分：

<div class="leblock">
        <strong>Title</strong> some text<br />
        <form  id="panier_1" method="post" action="">
        <input type="submit"  value="0130280001" />
        <div id="txtHint_1"><b>data will spawn below</b></div>
        <div> <span id="error_1" style="display:none; color:#F00">DIV 1 NOT OK</span>
         <span id="success_1" style="display:none; color:#0C0">OK</span></div>
        </form>
</div>        
     <br /><br /><br />
<div class="leblock">
        <strong>Title</strong> some text<br />
        <form  id="panier_2"    method="post" action="">
        <input type="submit"  value="0130280002" />
        <div id="txtHint_2"><b>data will spawn below</b></div>
        <div> <span id="error_2" style="display:none; color:#F00">DIV 2 NOT OK</span>
        <span id="success_2" style="display:none; color:#0C0">OK</span></div>
        </form>
</div>

和jQuery：

$(document).ready(function(){

    $('[id^="panier_"]').on('submit',function(e) {

        $.ajax({
            url:'panier.php',
            data:$(this).serialize(),
            type:'POST',
            success:function(data){

                $('[id^="success_"]').show().fadeOut(2000);                 
            },
            error:function(data){
            $("span:first-child").show().fadeOut(2000); //===Show Error Message====
            }
        });
        e.preventDefault();         
    });       
});

任何建议都将受到极大的重视

Answer 1

您遇到的一个问题是，您没有引用从表单提交处理程序中按下的按钮。一种解决方案是将单击处理程序附加到提交按钮以跟踪按下的最后一个提交按钮，并将其用作参考点以查找相应的错误消息位置。

我在这里更新了你的小提琴：http://jsfiddle.net/P5PRP/1/

$(document).ready(function(){
    var submitButtonPressed = null;
    $('input[type=submit]').click(function() {
        submitButtonPressed = this; 
    });
    $('[id^="panier_"]').on('submit',function(e) {
        console.log(e);
        var $this = $(this);
        $.ajax({
            url:'panier.php',
            data:$this.serialize(),
            type:'POST',
            success:function(data){
                if (submitButtonPressed) {
                    $(submitButtonPressed).closest('form').find('[id^="success_"]').show().fadeOut(2000);               
                }
            },
            error:function(data){
                if (submitButtonPressed) {
                    $(submitButtonPressed).closest('form').find("span:first-child").show().fadeOut(2000); //===Show Error Message====
                }
            }
        });
        e.preventDefault();         
    });       
});

Answer 2

我会在你的错误范围“错误”中添加一个类，并可能将样式移到类中，如下所示：

<style>
  .error {display:none; color:#F00}
</style>

<span id="error_1" class="error">DIV 1 NOT OK</span>

然后你可以从你的函数中访问它：

error:function(data){
        $(this).siblings(".error").show().fadeOut(2000); //===Show Error Message====
        }

Answer 3

可以通过隐藏带有id＆＃34; txtHint _＆＃34;的div来解决它。或者你甚至可以用id＆＃34; txtHint _＆＃34;来改变这个div的内部HTML。

我希望这会有所帮助。

错误信息不会显示在正确的位置

3 个答案: