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_updatediv 中的元素，从一个input元素上的事件开始，您可以执行以下操作：

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

那是做什么的：

  1. 在一个input元素的事件处理程序中，jQuery 设置this为对 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 回答