Question

我正在尝试将参数从HTML传递给jQuery，但是我只得到一种类型的答案，即使我在我的php文件中使用for循环如下：

for ($x = 0; $x < $length; $x++) {
  echo "<button ><a class='href' data-id='$x'>Text</a></button>";
}

我像这样检索它：

$y = $('.href').attr('data-id');

我有什么不对的吗？

Answer 1

来自http://api.jquery.com/attr/：

获取集合
中第一个元素的属性值

（强调补充）

即使$('.href')与$length元素匹配，它也只会为您提供0。

同样来自文档，

要单独获取每个元素的值，请使用循环结构，例如jQuery＆＃39} .each()或.map()方法。

（其他人都在发布代码示例，所以......）

var y = $('.href').map(function (index, element) {
    return $(element).attr('data-id');
}).get();

Answer 2

这只会给你第一个id，而不是一个ID数组。您需要为每个ID获取多个ID。

y = [];
$('.href').each(function() {
  y.push($(this).attr('data-id'));
});
alert(y);

Link to jsFiddle

Answer 3

使用循环检索数据值。也可以使用.data()代替.attr()：

$('.href').each(function(i,a) {
    var y = $(a).data('id') 
    // use y
    console.log( y );
});

Answer 4

<强> TL;博士

$(".href").each(function()
{
    console.log($(this).attr("data-id"));
});

<强>解释

您的代码运行并运行，而不是您认为它的工作方式。

我们假设$length等于2（并不重要）：

$length = 2;
for($x = 0; $x < $length; $x++)
{
    echo "<button ><a class='href' data-id='$x'>Text</a></button>";
}

它会生成两个按钮，一个标识为0，另一个标识为1：

<button ><a class='href' data-id='0'>Text</a></button>
<button ><a class='href' data-id='1'>Text</a></button>

您正试图获取这样的值：

$y = $('.href').attr('data-id');

然而，它确实是only fetches the data-id matching the first element which has class 'href'，如documentation中所述。

如果您想获得当前点击按钮的id，那么您可以这样做：

$('.href').on("click", function()
{
    var clickedId = $(this).attr('data-id');
});

（聆听关于班级href的元素的点击事件）

Working demo

如果您希望获得所有可用的ID，那么您可以浏览每一个ID并获取ID：

<p id="output"></p>
$(".href").each(function()
{
    var currentId = $(this).attr("data-id");
    $("#output").append("Button id: " + currentId + "<br />");
});

（解析具有类href的元素的每个实例）

Working demo

将参数从html传递给jquery

4 个答案: