特定の入力ボタンがクリックされた場合にのみdivにクラスを追加

Question

フォームにエラーメッセージング用の隠しdivを表示する関数があります。

この機能では、シナリオによって2つの異なる場所に表示する必要があります。したがって、特定の送信ボタンがクリックされた場合は、クラスを追加する必要があります。私は別の関数を書くことができますが、私はdiv要素の表示を扱う私の現在の機能の中でそれを含めたい：

function giftAlert(){ 
    var args = arguments; 
    if(args.length > 1) { 
     // check that custom alert was called with at least two arguments 
     var msg = args[0]; 
     $('.errorPopup').hide(); 
     $('.couponPopup').hide(); 
     $('.promotionPopup').hide(); 
    $("*").removeClass("alertRed"); 
     $("*").removeClass("CO_form_alert"); 


     var div = $(".giftPopup"); 
     div.css({"display":"block"}); 
     if (div.length == 0) { 
      div = $("<div class='giftPopup' onclick='$(this).hide();'></div>"); 
      $("body").prepend(div); 
     } 
     div.html(msg); 
     for(var i = 1; i < args.length; i++) { 
      var inputID = args[i]; 
      $("#"+inputID).addClass("CO_form_alert").parent().addClass("alertRed"); 
     $('#' + inputID).focus(); 
     $('#' + inputID).keydown(function() { $('.giftPopup').hide(); }).change(function() { $('.giftPopup').hide(); }).blur(function() { $('.giftPopup').hide(); }); 

     } 
    } 

} 

だから、このビットがどこにあるか：

var div = $(".giftPopup"); 
      div.css({"display":"block"}); 

私はしたいと思いますいくつかのロジックを追加します。もしinput1がクリックされたら、giftPopupはinput1に対してのみ追加クラスを取得します。

help？

$('.input1').click(function(){ 
    $('.giftPopup').addClass('whatever'); 
}); 

例：http://jsfiddle.net/ebiewener/Dsb8X/

Answer 1

。私はこれがあなたが探しているものであることを願っています。

 for(var i = 1; i < args.length; i++) { 
      var inputID = args[i]; 
      var $input = $("#"+inputID); 
      $input.addClass("CO_form_alert").parent().addClass("alertRed"); 
      $input.focus().keydown(function() { $('.giftPopup').hide(); }).change(function() { $('.giftPopup').hide(); }).blur(function() { $('.giftPopup').hide(); }); 

      if(i == 1){ 
       $input.click(function(){ 
       $(".giftPopup").addClass("specifyClassNameHere"); 
       }); 
      } 
     } 

Answer 2

あなたは以下のようにコード内でforループを変更することができ、あなたのINPUT1要素はあなたがjQueryのに必要なことがあり、HTML <input class="input1" type=button />で構成されたと仮定すると

Answer 3

私はinput1にクリックをバインドするだけです。ここでは、あなたにとって非常に役立ついくつかのことを行うJSFiddleがあります。

$(document).ready(function() { 
    $("#input1").live("click", function() { 
     $(".giftPopup").addClass("special"); 
    }); 
}); 

あなたが.live使用してイベントをバインドするためにjqueryのを使用する必要がありますonclickを使用することは非常に良い理由がない限り（）または.delegate（）。この場合は.click（）を使用することもできますが、DOMに要素を追加するのは面倒です。追加された要素に.click（）が機能しないため、.live（）または.delegate DOMは後で。