带有/ for循环按钮的Javascript jquery帮助

Posted

技术标签:

【中文标题】带有/ for循环按钮的Javascript jquery帮助【英文标题】:Javascript jquery Help w/ for loop buttons 【发布时间】:2017-04-25 10:06:03 【问题描述】:

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

【问题讨论】:

目前还不清楚您要在这里寻找什么。制作一个将获取单击按钮的值并记录它的函数相对简单:$('button').click(function () console.log(this.value); );。我有点不清楚你想用循环做什么。 最终,我相信您在这里遇到的唯一错误是对成功回调的错误调用。 【参考方案1】:

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

【讨论】:

【参考方案2】:

如果我理解您的要求,您根本不需要构建数组。相反,您可以在其自己的事件处理程序中读取单击按钮的value。然后,您可以在通过 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】:

您的按钮可能包含在一个元素中。类似的,

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

【讨论】:

【参考方案4】:

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

所以,我觉得你可能过于复杂了:

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

$('按钮');在 JQuery 中已经返回了它所针对的所有元素的数组。

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

$.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() );
);

另外,同时执行 .success() 和 .fail(),以查看您的 ajax 是否真正通过。

【讨论】:

以上是关于带有/ for循环按钮的Javascript jquery帮助的主要内容,如果未能解决你的问题,请参考以下文章

在 javascript 中使用带有 onclick 函数的 for 循环来打印数字 1 到 10

jq循环遍历元素的高度,判断超出显示更多按钮

jq 循环添加监听事件遇到的坑

如何在 for 循环中设置带有动画的按钮 alpha?

带有嵌套for循环的Javascript多维数组-无法正常工作

使用带有 JavaScript 模板文字函数的 for 循环