0

基本的にdb_update、ぼかしでトリガーされる入力フィールドの親divクラス内の要素のみをターゲットにしようとしていますが、名前が一致するクラスをターゲットにしています。これは私が望むものではありません。今のところ無関係なので、AJAXの部分は無視してください。

問題は、ぼかしで入力要素をターゲットにすることにあり、親要素に正常にチェーンできないことにあると思います。

基本的に、どちらのURL入力ボックスをクリックしても、両方ではなく、どちらのフィールドに入力する必要があります。

http://jsfiddle.net/SXWXu/6/

HTML

<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

<br/>
<div class="db_update">
<p style="font-size: 12px;"><span style="font-weight: normal;">SLIDE URL: <input type="text" class="slide_URL"  /></span></p>
<div class="status_message"> </div>
<p style="font-size: 12px;"><span style="font-weight: normal;">Slide #: <input type="text" class="slide_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Document #: <input type="text" class="doc_num" readonly/></span></p>
<p style="font-size: 12px;"><span style="font-weight: normal;">Filter(F): <input type="text" class="filter_num" readonly/></span></p>
</div>

Jquery

$(document).ready(function() {


$('input[class=slide_URL]').on({

   blur: function(){
    var status_message = $('.status_message');
    var query_string = encodeURIComponent($(this).val()); 
    var dataString = 'query_string='+ query_string;

     $.ajax({
      type : 'GET',
      url: '',
      dataType : 'json',

      data:  dataString ,
      error : function(XMLHttpRequest, textStatus, errorThrown) {


          $(this).parent().find('.slide_num').val(140);
            $('.doc_num').val(140);
        $('.filter_num').val(140);

      status_message.removeClass().addClass('failure').text('Request was not sent.').show(200);},

      success : function(data) {


       if (data.error === true)
       {


     status_message.show().removeClass('success').addClass('failure').text(data.msg).stop().fadeOut(3000);


     }
    else {
     status_message.show().removeClass('failure').addClass('success').text(data.msg).stop().fadeOut(3000);




         }
     } 
       });    
 return false; 

   }
 });
 });
4

2 に答える 2

1

.db_update要素の 1 つのイベントから始めて、同じ div内の要素のみをターゲットにするにはinput、次のようにします。

var status_message = $(this).closest(".db_update").find(".status_message");

それは何をしますか：

  1. 要素の 1 つのイベント ハンドラー内でinput、jQuerythisは DOMinput要素への参照を設定します。

  2. $(this)その要素の周りに jQuery ラッパーを作成します。

  3. .closest(".db_update")セレクターに一致する最も近い親要素を見つけます。

  4. .find(".status_message")セレクターに一致するその要素のすべての子孫要素を検索します。

したがって、それをバラバラに分割しthis、input（イベントハンドラーにある）と仮定します：

  • $(this)- jQuery ラッパーinput
  • $(this).closest(".db_update")- それ.db_sessionを含むinput
  • $(this).closest(".db_update").find(".status_message")- その.status_message中の要素div。
于 2012-12-27T23:46:09.777 に答える
1

ぼかした要素.closest()の祖先を取得してから、必要な を見つけるために使用します。.db_update.find()status_message

var status_message = $(this).closest('.db_update').find('.status_message');
于 2012-12-27T23:46:32.680 に答える