JQuery와 결과가

내가 내가 결국 에 0에서 숫자를 거의 같은 ID로 여러 된 DIV하지만 가진 단위를 가지고 문제에 직면하고, 나는 모든 다른이 이름 확인 기능을 사용하려면 사용자 이름 입력란에 입력하고 해당 관련 div에 결과를 표시합니다. 가능한 모든 방법을 시도했지만 작동하지 않았습니다.JQuery와 결과가

여기 여기 내 Fiddle

것은 id 속성은 거의 항상 안티 패턴 그리고 그들이 해결보다는 그들이 더 많은 문제를 만들 때 가능하면 피해야한다

$(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

증분/내 코드 동적입니다.

더 나은 해결책은 이벤트를 발생시킨 요소와 관련된 요소를 찾기 위해 DOM 통과를 사용하는 것입니다. 귀하의 경우 은 input입니다.

이렇게하려면 먼저 오래된 on* 이벤트 속성 대신 눈에 거슬리지 않는 이벤트 처리기를 사용하십시오. 그런 다음 id 특성을 클래스로 변경하십시오. 요소를 찾으려면 this 키워드를 사용하여 이벤트를 발생시킨 요소를 참조한 다음 prev() 및 prevAll().first()을 사용하여 클래스에서 필요한 요소를 찾습니다. 마지막으로 eval()을 통해 실행할 문자열을 해킹하여 익명 함수를 setTimeout()에 제공하십시오. 이 시도 :

<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 또는 내가 당신을 위해 jfiddle을 한

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

클래스, 즉 줄 필요가 :

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

출처

2017-02-13 12:00:06 naklis

JQuery와 결과가

답변

관련 문제