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 联系我们: