如何获取所有元素的数据，而不仅仅是第一个元素的数据

Question

我现在花几个小时解决一个我无法解决的问题。

我有一个数据属性很少的按钮，该按钮打开一个 js 模式。数据属性的数据需要在模式中显示。
这个按钮也通过 php foreach 打印了 15 次，每个按钮都有一些其他数据。

<div class='w-full sm:w-full md:w-full lg:w-1/4 xl:w-1/5 float-left'>
 <div class='ml-2 mr-2 p-4 bg-white rounded h-auto mt-2'>
  <center>
  <center><div class='h-16 w-16'><img src='$img_url'></div><center>
  <p class='pb-1 text-xl'><span class='font-bold'>$currency_name</span>
  <span class='text-sm'>$currency_code</span></p>
  <p class='pb-2'><span class='text-center'>$balance</span></p>
  <p class='flex items-center justify-between mb-0 border-b-2 border-t-2 border gray-300'>
  <span class='text-left'>Price: </span><span class='text-right'>$price</span></p>
  <p class='flex items-center justify-between mb-0 border-b-2 border-gray-300'> 
  <span class='text-left'>Fee: </span><span class='text-right'>$payout_fee</span> 
 </p>
</center>
<div class=''>
<button class='mt-2 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded my-button withdraw' data-currency_name='$currency_name' data-currency_code='$currency_code'>Withdraw</button></div>
</div></div>

 <script type="text/javascript">
    $(document).ready(function() {
    var currency_name = $('.withdraw').data('currency_name');

    document.getElementById("title").innerHTML = "Withdraw "+currency_name+"";

  });
  
  </script>

现在的问题是只有第一个按钮打印出正确的信息。所有其他的都给出第一个的数据。 我的按钮 class 用于模式。

也许你们中有人有想法？

Answer 1

假设你想获取每个元素的数据属性 withdraw class，那么试试这个：

var buttons = $('.withdraw');

for(var i=0; i< buttons.length; i++){
    var button = $(`.withdraw:nth-child(${i+1})`);
    button.click(function() {
        var currency_name = $(this)[0].getAttribute("data-currency_name");
        $("#title")[0].innerHTML = `Withdraw ${currency_name}`;
    })
}

currencies 变量是一个数组，它将包含所有货币值。

document.getElementById("title").innerHTML = "Withdraw "+currency_name+""; 有什么作用？如果您能为我们提供更多有关您要实现的目标的背景信息，那么我可以为您提供更好的脚本。

如何获取所有元素的数据，而不仅仅是第一个元素的数据

How to get the data for all elements not only for the first one

javascript

custom-data-attribute