jQuery的結果在其相對的div

我面對，我有幾乎相同的ID多個div但有增量從到任意數量到底出了問題，我想用這個用戶名檢查功能對每個不同用戶名字段，並在其特定的相關div中顯示其結果。我嘗試了所有可能的方式，但沒有奏效。jQuery的結果在其相對的div

這裏是我的Fiddle

這裏是我的代碼

$(document).ready(function() { 
    $('[id^=Loading]').hide();  
}); 

function check_username(){ 

    var username = $("[id^=username]").val(); 
    if(username.length > 1){ 
     $('[id^=Loading]').show(); 
     $.post("username-Check.php", { 
      username: $('[id^=username]').val(), 
     }, function(response){ 
      $('[id^=Info]').fadeOut(2100); 
      $('[id^=Loading]').fadeOut(2100); 
       setTimeout("finishAjax('Info', '"+escape(response)+"')", 2000); 
     }); 
     return false; 
    } 
} 

function finishAjax(id, response){ 

    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(2000); 
}

來源

2017-02-13 DUbaicos

增量/動態id屬性幾乎都是反模式，應該儘量避免使用，因爲它們比解決造成更多的問題。

更好的解決方案是使用DOM遍歷來查找與引發事件的元素相關的元素 - 在您的案例中上的blur。

爲此，首先使用不顯眼的事件處理程序，而不是過時的on*事件屬性。然後將id屬性更改爲類。要查找元素，請使用關鍵字this來引用引發該事件的元素，然後使用prev()和prevAll().first()來查找其類所需的元素。最後，向setTimeout()提供一個匿名函數，將一個字符串串起來，並通過eval()運行。試試這個：

<div class="info"></div> 
<span class="loading"></span> 
<input class="username form-control" type="text" name="txtengine" placeholder="914899" value="" /><br> 

<div class="info"></div> 
<span class="loading"></span> 
<input class="username form-control" type="text" name="txtengine" placeholder="914899" value="" /><br>

$(document).ready(function() { 
    $('.loading').hide(); 
}); 

$('.username').on('blur', function() { 
    var username = $(this).val(); 
    if (username.length) { 
     var $loading = $(this).prev('.loading').show(); 
     var $info = $(this).prevAll('.info').first(); 

     $.post("username-Check.php", { 
      username: username, 
     }, function(response) { 
      $info.fadeOut(2100); 
      $loading.fadeOut(2100); 
      setTimeout(function() { 
       $info.html(response).fadeIn(2000); 
      }, 2000); 
     }); 
    } 
})

Working example

注意的是，在小提琴的例子已修訂，以適應jsFiddles' JSON響應邏輯的AJAX請求邏輯，但功能是相同的。

來源

2017-02-13 11:23:26

其不工作 – DUbaicos

我添加了一個小提琴來顯示它的工作。如果它不適合你，請檢查控制檯是否有錯誤。請給出更有用的反饋比'它不工作' –

它的工作原理，但只有前兩個文本框，當我有更多的文本框時，它不會工作 – DUbaicos

在我開始回答之前，我強烈建議您使用一個類，然後通過類名選擇。因爲它似乎是什麼時候使用jquery類選擇器的教科書。

您不能使用屬性選擇器而不指定您正在使用它。即你不能說：

$('[id^=Loading]')

你需要給標籤名稱，ID，或者類即

$('span[id^=Loading]')

我已經做了jfiddle你：

https://jsfiddle.net/acc069me/6/

來源

2017-02-13 12:00:06 naklis

jQuery的結果在其相對的div

回答

相關問題