0

我有一个区域文本，当我单击保存时，如果消息为空，则会出现一个错误框。但是，如果我制作两个文本框，则消息会出现在两个区域中。如何区分它们？我尝试使用不起作用的 id。

http://gyazo.com/5ae3f1bd82ac829094c3ca567882b3f2

这是我的代码：

<body>
<div class="container">
    <form id="messageAbsence">
         <div class="control-group">
                <div class="controls">
                    <label class="form-horizontal">
                        <textarea class="span10" id="text1"></textarea>
                        <button class="btn" id="1">Sauvegarder</button>
                    </label>

                    <div class="alert alert-error hide">
                        <h4 class="alert-heading">Erreur !</h4>
                     Vous devez entrer au moins 4 caractères et au plus 200 caractères !
                    </div>
                    <div class="alert alert-info hide">
                        <h4 class="info-heading">Succes!</h4>
                         Message bien enregistré.
                    </div>
                </div>
        </div>
    </form>
    <form id="redirect">
         <div class="control-group">
                <div class="controls">
                    <label class="form-horizontal">
                        <textarea class="span10" id="text2"></textarea>
                        <button class="btn" id="2">Sauvegarder</button>
                    </label>

                    <div class="alert alert-error hide">
                        <h4 class="alert-heading">Erreur !</h4>
                     Vous devez entrer au moins 4 caractères et au plus 200 caractères !
                    </div>
                    <div class="alert alert-info hide">
                        <h4 class="info-heading">Succes!</h4>
                         Message bien enregistré.
                    </div>
                </div>
        </div>
    </form>
</div>

<

!--message error test trop court ou trop long -->
<script type="text/javascript">

    $(function(){
        $("#1").click( function(){
        if($("#text1").val().length < 4 || $("#text1").val().length > 200){
            $("div.alert-error").show("slow").delay(4000).hide("slow");
            return false;
        }
        else
        {
            $("div.alert-info").show("slow").delay(4000).hide("slow");
                return false;
        }
        });
    });

    $(function(){
        $("#2").click( function(){
        if($("#text2").val().length < 4 || $("#text2").val().length > 200){
            $("div.alert-error").show("slow").delay(4000).hide("slow");
            return false;
        }
        else
        {
            $("div.alert-info").show("slow").delay(4000).hide("slow");
                return false;
        }
        });
    });
</script>
4

1 回答 1

0

尝试这个：

$(function () {
    $("#1").click(function () {
        if ($("#text1").val().length < 4 || $("#text1").val().length > 200) {
            $(this).parent().siblings("div.alert-error").show("slow").delay(4000).hide("slow");
            return false;
        } else {
            $(this).parent().siblings("div.alert-info").show("slow").delay(4000).hide("slow");
            return false;
        }
    });

    $("#2").click(function () {
        if ($("#text2").val().length < 4 || $("#text2").val().length > 200) {
            $(this).parent().siblings("div.alert-error").show("slow").delay(4000).hide("slow");
            return false;
        } else {
            $(this).parent().siblings("div.alert-info").show("slow").delay(4000).hide("slow");
            return false;
        }
    });
});
于 2013-04-14T14:14:33.303 回答