Javascript jquery幫助w / for循環按鈕

[英]Javascript jquery Help w/ for loop buttons


I have problem with my code.I'm building a spotify app for school using the spotify WEB Api. My problem is that I have a function that will use a for loop to output data in a table and also create buttons with individual ids like=

我的代碼有問題。我正在使用spotify WEB Api為學校構建一個spotify應用程序。我的問題是我有一個函數,它將使用for循環在表中輸出數據,並創建具有單個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>

and so on. Every button also has a value which represents an albums id. I then transformed these buttons to an array using .toArray so i could get the value i need for every single button. Is it possible to make a function in a way that when i press btn_0 it will get the value of btn_0 and then output it to the console?And then the function would do it for every button. I tried doing one but it just outputs the data from every value like here:

等等。每個按鈕還有一個表示專輯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);
    }});
  }
});

I know i have the class .Abuttons there but i tried to make a for loop before it so it would call every single button, but it didnt work. Hope you understand, and thx for all the help.

我知道我有類.Abuttons那里但我試圖在它之前做一個for循環所以它會調用每個按鈕,但它沒有工作。希望你理解,並為thx提供所有幫助。

P.s My first time here so i couldnt get the formatting to work on my jquery code.

P.s我第一次在這里,所以我無法使格式化我的jquery代碼。

5 个解决方案

#1


1  

ajax success is callback method but when you are using for loop after one loop it won't wait for the first ajax callback to fire ! it goes for second loop and so on one solution for this is to declare a variable i for counting above all then create a function for ajax call , in success callback you count requests if variable i is smaller than number of for loop you call that function again while reach to loop !

ajax成功是回調方法但是當你在一個循環后使用for循環時它不會等待第一個ajax回調觸發!它適用於第二個循環,所以一個解決方案就是聲明一個變量i進行計數,然后為ajax調用創建一個函數,成功回調你計算請求,如果變量i小於for循環的數量你調用該函數再次到達循環!

#2


0  

If I understand what you're asking, you don't need to build an array at all. Instead you can read the value of the clicked button within its own event handler. You can then include that value in the URL you call via AJAX to get the information, something like this:

如果我理解你在問什么,你根本不需要構建一個數組。相反,您可以在其自己的事件處理程序中讀取單擊按鈕的值。然后,您可以在通過AJAX調用的URL中包含該值以獲取信息,如下所示:

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

#3


0  

Your buttons are probably wrapped in an element. Something like,

您的按鈕可能包含在元素中。就像是,

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

Thus, you can bind a click event in this div and get a click target.

因此,您可以綁定此div中的單擊事件並獲取單擊目標。

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

#4


0  

You can use jQuery $(this) to get the event target value of the value attribute:

您可以使用jQuery $(this)來獲取value屬性的事件目標值:

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

#5


0  

So, I feel like you may be overcomplicating it:

所以,我覺得你可能過於復雜了:

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

$('button'); in JQuery already returns back an array of all elements it's targeted.

$( '按鈕');在JQuery中已經返回了它所針對的所有元素的數組。

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

$.each will filter through the buttons much like the for loop, but there are different benefits.

$ .each將像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() );
});

Also, do both a .success() and a .fail(), to see if your ajax is actually going through.

另外,同時執行.success()和.fail(),看看你的ajax是否真正經歷過。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/12/09/31f0bc0531b562262ea33e204e452836.html



 
  © 2014-2022 ITdaan.com 联系我们: