1

一度送信すると、エラー「li」タグをフォームの下の空の div に追加する検証スクリプトがあります。「li」タグがdivに追加されたら、このdivを下にスライドさせたいのですが、うまくいきます。

jQuery の .slideDown 効果を使用してこれを達成しましたが、最初の「li」タグまでしかスライドしないようで、その後、残りの「li」タグをジャンプします。理由がわかりません。スライド ダウン効果は、「li」タグではなく div 自体にあります。

これが私のCodePenの実例です。

コードは次のとおりです。

$("form").on("submit", function(e){
  $("li").remove();

  $("input").each(function(){
    var $this = $(this);

    if($($this).val() === ""){
      var formName      = $($this).attr("name");
      var errorMessage  = $(".errorMessage");
      var li            = $("<li></li>",{
        text: "There was an error with " + formName,
        class: "errorText",
      });

      $($this).addClass("errorInput");
      $(errorMessage).append(li);
      $(errorMessage).slideDown(1500);
      e.preventDefault();
    } if($($this).val() != ""){
      $($this).removeClass("errorInput"); 
    } else{
      return true; 
    }
  }); //Input
}); //Form .submit
4

2 に答える 2

3

each() 関数からスライドダウンを削除し、ループの後に配置します。これは 2 回呼び出されています。

http://codepen.io/anon/pen/nxtFi

それが役に立てば幸い。

于 2013-02-11T14:57:47.907 に答える
0

.slideDown()内で呼び出している.each()ため、入力要素ごとに 1 回呼び出されます。ただし、.slideDown()呼び出されている要素が現在表示されていない場合にのみアニメーション化すると思われます。

したがって、 を追加して<li>を呼び出す.slideDown()と、アニメーションが表示されます。next<li>と callを追加して.slideDown()も、既に表示されているため何も起こりません。ただし、コンテナー要素にコンテンツを追加したため、サイズが大きくなります (前述の「ジャンプ」)。

この行を呼び出すだけです：

$(errorMessage).slideDown(1500);

への呼び出し全体の後.each()。

于 2013-02-11T15:05:52.893 に答える