Javascript jquery 도움말 (루프 버튼 사용)

Question

내 코드에 문제가 있습니다. spotify WEB API를 사용하여 학교용 spotify 앱을 만들고 있습니다. 내 문제 = I 테이블에서 출력 데이터 루프를 사용하여도 같은 개별 ID가 버튼을 생성하는 기능을 갖도록에

<button value="5BJeN4SVEKe204y2SiszOe" id="btn_0">Lorem</button> 
<button value="0xmaV6EtJ4M3ebZUPRnhyb" id="btn_1">Lorem</button> 
<button value="0rSLgV8p5FzfnqlEk4GzxE" id="btn_2">Lorem</button> 
<button value="0esxMkxlIDKbkWL8Vuj35V" id="btn_3">Lorem</button> 

하고있다. 모든 버튼에는 앨범 ID를 나타내는 값도 있습니다. 그런 다음이 단추를 .toArray를 사용하는 배열로 변환하여 모든 단일 단추에 필요한 값을 얻을 수있었습니다. btn_0을 누르면 btn_0의 값을 얻은 다음 콘솔로 출력 할 수있는 함수를 만들 수 있습니까? 그러면 함수는 모든 버튼에 대해이 작업을 수행합니다. ,

$(document).on('click', '.Abuttons', function(e) { 
    var array = $("button").toArray(); 

for (var i=0; i < array.length; i++) { 
$.ajax({url: "https://api.spotify.com/v1/albums/"+ array[i].value +"/tracks", success: function(result) { 
     console.log(result); 
    }}); 
    } 
}); 

내가이 클래스 .Abuttons을 알고하지만 난이 모든 하나의 버튼 부를 것이다 그래서 전에 루프를 만들려고 : 나는 하나를 수행하려고하지만 여기처럼 모든 값의 데이터를 출력 그러나 그것은 일을 didnt한다. 당신이 이해하고, 모든 도움을 주길 바랍니다.

P.s 내 처음으로 여기 내 jquery 코드에서 작동하도록 서식을 얻을 couldnt.

Answer 1

아약스 성공은 콜백 메소드이지만 한 루프 후에 for 루프를 사용하면 첫 번째 아약스 콜백이 시작될 때까지 기다리지 않습니다! 그것은 두 번째 루프 등이 간다 이것에 대한 하나의 해결책은 위의 모든 것을 계산하기 위해 변수 i를 선언 한 다음 아약스 호출을위한 함수를 작성하는 것입니다. 성공 콜백에서 변수 i가 호출 할 for 루프의 수보다 작 으면 요청을 계산합니다. 루프에 도달하는 동안 다시 기능!

Answer 2

당신은 value 속성의 이벤트 목표 값을 얻기 위해 jQuery를 $(this)을 사용할 수 있습니다 : 당신이 요구하는지 이해한다면

$('[id^=btn_]').on('click', function(e) { 
 
    $.ajax({ 
 
    url: "https://api.spotify.com/v1/albums/" + $(this).attr("value") + "/tracks", 
 
    success: function(result) { 
 
     console.log(result); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button value="5BJeN4SVEKe204y2SiszOe" id="btn_0">Lorem</button> 
 
<button value="0xmaV6EtJ4M3ebZUPRnhyb" id="btn_1">Lorem</button> 
 
<button value="0rSLgV8p5FzfnqlEk4GzxE" id="btn_2">Lorem</button> 
 
<button value="0esxMkxlIDKbkWL8Vuj35V" id="btn_3">Lorem</button>

Answer 3

, 당신이를 구축 할 필요가 없습니다 배열. 대신 자신의 이벤트 핸들러 내에서 클릭 한 버튼의 value을 읽을 수 있습니다.

$(document).on('click', 'button', function(e) { 
 
    $.ajax({ 
 
    url: "https://api.spotify.com/v1/albums/" + this.value + "/tracks", 
 
    success: function(result) { 
 
     console.log(result); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button value="5BJeN4SVEKe204y2SiszOe" id="btn_0">Lorem</button> 
 
<button value="0xmaV6EtJ4M3ebZUPRnhyb" id="btn_1">Lorem</button> 
 
<button value="0rSLgV8p5FzfnqlEk4GzxE" id="btn_2">Lorem</button> 
 
<button value="0esxMkxlIDKbkWL8Vuj35V" id="btn_3">Lorem</button>

Answer 4

귀하의 버튼이 아마도 요소에 싸여있다 : 당신은 다음과 같이 당신이 정보를 얻기 위해 AJAX를 통해 호출하는 URL에 값, 뭔가를 포함 할 수 있습니다. 뭔가 같은, 따라서

<div class="my-buttoms"> 
    <button value="..."></button> 
</div> 

,이 div에서 click 이벤트를 바인딩하고 클릭 목표를 얻을 수 있습니다.

$('.my-buttons').on('click', (e) => console.log(e.target.value)) 

$('.w').on('click', function(e) { 
 
    if (e.target.tagName === 'BUTTON') { 
 
    alert(e.target.value); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="w"> 
 
    <button value="1">1</button> 
 
    <button value="2">2</button> 
 
</div>

Answer 5

그래서, 난 당신 같은 느낌이 그것을과 복잡함을 할 수있다 :

https://jsfiddle.net/bashaen/vewae2t7/3/

$ ('버튼을'); JQuery에서 이미 목표로하는 모든 요소의 배열을 반환합니다.

var arr = $("button"); 
// Actually Contains - [button, button, button, button] 

$. 각 루프는 for 루프와 비슷하게 버튼을 필터링하지만 다른 이점이 있습니다.

$.each(arr, function(i, e) { // i = index, e = element 
    console.log($(e).val()); 
    // or if you're more comfortable with it. 
    console.log($(this).val()); 
}); 

또한 .success()와 .fail()을 모두 수행하여 아약스가 실제로 통과하는지 확인하십시오.