2016-04-13 21 views
0

正しい値が入力されたときに入力フィールドの後に成功スパンを挿入するために正しく動作する次のコードがあります。しかし、私の問題は、フィールドを離れるたびにスパンを追加することです。質問Jquery insertAfter only once if element existから、作成時にスパンのIDを設定し、イベントが既に発生しているかどうかを確認するたびにその長さを確認することができます。しかし、フィールドを選択するためにクラスを使用するとき、それを行う方法がわかりません。jQuery .insertAfterクラスセレクターで一度だけ

クラスセレクタのヘルプが役に立ちます。

$(".systemFieldName").blur(function(){ 
      var val = $(this).val(); 
      var exists = $.inArray(val,allFields); 
    if (val!="" && exists>=0){ 
     $("<span class='label label-success'>Valid</span>").insertAfter(this).one(); 
    } 
}); 
+0

if条件の場合は '$(this).val()。length'をチェックします。 – uzaif

+0

.systemFieldNameクラスを使用して、成功スパンが既に属性に追加されているかどうかを保存する別の方法です。つまり、設定のための '$(this).attr( 'correct'、1)'と検査のための 'if($(this).attr(' correct ')== 1)'です。 – Tomasito665

+0

ぼかしではなく、変更イベントをバインドする必要があります。 – DinoMyte

答えて

1

これが役立ちます。

allFields=["121",'test']; 
$(".systemFieldName").blur(function(){ 
      var val = $(this).val(); 
      var exists = $.inArray(val,allFields); 
      //See if the next element is a span with class label. 
      var nextEl=$(this).next(); //next element 
      var add=true; //add by default 
      if(nextEl.hasClass('label-success')) add=false; //don't add. 

    if (val!="" && exists>=0 && add){ //only insert if all conditions are true. 

     $("<span class='label label-success'>Valid</span>").insertAfter(this).one(); 
    }else if((val == "" || exists < 0) && !add) { // The !add means there is already the Valid span, we can safely remove nextEl, if the value changes. 

     nextEl.remove(); 
    } 
}); 

https://jsfiddle.net/ym66f48p/2/

これは、次の要素がスパンであることを確認するためにチェックし、それはまた、値が後で変更された場合、それが有効なスパンを削除することをremove関数が含まれていますが、場合にのみ、次の要素はすでに有効なスパンです。

jsFiddleのテストとして121またはtestを使用します。

+0

完璧に動作します。また、削除を追加していただきありがとうございます。非常に役立ちます。 – JoBaxter

1

このバイオリンを試してみてください:https://jsfiddle.net/8jpc74z8/

は、私がここでやっているすべてはsystemFieldNameに任意の兄弟がすでに追加があるかどうかを確認することです。そうでない場合は、追加します。

if($(".systemFieldName +.label-success").length === 0){ 
+0

ジョブを実行する際に、systemFieldNameとlabel-success.label-successの両方をチェックする必要はありません。また、推奨として、blurの代わりに.changeイベントを使用してください。また、条件が満たされていない(現在コードから抜けている)要素を削除する必要があります。ここに例があります:https://jsfiddle.net/DinoMyte/8jpc74z8/1/ – DinoMyte

+0

いいえ。実際のシナリオでは、同じクラスの複数の入力フィールドがあり、その隣にsuccess divを追加したいと考えています。満足していない状態については、OPはそれを求めていない。 – Ash

関連する問題