Question

我的代码有问题。我正在使用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>

等等。每个按钮还有一个表示专辑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那里但我试图在它之前做一个for循环所以它会调用每一个按钮，但它没有工作。希望你理解，并希望得到所有的帮助。

P.s我第一次来这里，所以我无法使格式化工作在我的jquery代码上。

Answer 1

ajax成功是回调方法但是当你在一个循环后使用for循环时它不会等待第一个ajax回调触发！它适用于第二个循环，依此类推一个解决方案是首先声明一个变量i进行计数，然后为ajax调用创建一个函数，如果变量i小于for循环的数量，则在成功回调时计算请求，当你到达循环时再次调用该函数！

Answer 2

您可以使用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>

Answer 3

如果我理解你的要求，你根本不需要构建一个数组。相反，您可以在自己的事件处理程序中阅读单击按钮的$(document).on('click', 'button', function(e) { $.ajax({ url: "https://api.spotify.com/v1/albums/" + this.value + "/tracks", success: function(result) { console.log(result); } }); });。然后，您可以在通过AJAX调用的URL中包含该值以获取信息，如下所示：

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

preg_grep

Answer 4

您的按钮可能包含在元素中。像，

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

因此，您可以在此click中绑定div个事件并获得点击目标。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

所以，我觉得你可能过于复杂了：

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

$（＆＃39;按钮＆＃39）;在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（），看看你的ajax是否真正经历过。

Javascript jquery帮助w / for循环按钮

5 个答案: