$（this）.attr（“data-id”）返回undefined

Question

我正在建立一个网上商店，每个项目都有一个按钮，可以将该项目添加到购物车。

<?php
$i = 0;
$path = "../images/women/winter/winter1";
$lang = "description_".get_param();

if(!$result = $db->query("SELECT * FROM cloths;")){
die("There was an error running the query [".$db->error."]");
}
while($winter = $result->fetch_assoc()){
    echo "<div class = \"boxsale $winter[image]\">
              <img src = \"$path.jpg\"/>
              <div class = \"test\"> $winter[$lang] </div>
              <select>
                <option>S</option>
                <option>M</option>
                <option>L</option>
                <option>XL</option>
                <option>XXL</option>
              </select>
              <button class = \"addToCart\" onclick = \"executeJS()\"> <i class = \"fa fa-shopping-cart\" data-id = \"$i\" aria-hidden=\"true\"></i></button>
      </div>";
      $i++;
  }?>

</div>

当您单击按钮时，最后几行中的executeJS（）将从单独的文件中调用。

addToCart.js

function executeJS(){
  var id = $(this).attr("data-id");
  $.ajax( {
    type: "GET",
    url: "ajax.php?id=" + id + "&action=add"
  })
  .done(function(){
    alert("Product has been added.");
  });
}

我想从已点击的按钮中获取数据ID

$(this).attr("data-id");但我得到的是一个未定义为data-id的标头。

id=undefined&action=add

任何人都可以指出我正确的方向？

谢谢

Answer 1

问题是因为$(this)未正确应用于您尝试访问的元素。当使用基于onclick处理程序的字符串（onclick="test()"）时，this引用窗口，而不是您尝试访问的元素。

function test() {
  console.log(this.id);
}

<a href="#" id="test" onclick="test()" data-id="test">Link</a>

如果你想使用基于onclick表示法的字符串，请明确传递你的元素，然后执行$(element)。

<button class = \"addToCart\" onclick = \"executeJS(this)\" data-id = \"$i\" />

使用Javascript：

function executeJS(element){
    var id = $(element).data('id');
    ...

就个人而言，一起跳过attr-id，直接传递你的id：

<button class = \"addToCart\" onclick = \"executeJS($id)\" />

Answer 2

看起来this可能指向窗口而不是按钮。

您可以通过手动查找按钮来解决此问题：

var id = $(".addToCart").attr("data-id");

只有你只有一个按钮才能真正起作用。你应该做的是使用jquery将事件附加到按钮。

在你的javascript中：

$(".addToCart").click(function(e){
    var id = $(e.target).attr("data-id");
    $.ajax({
        type: "GET",
        url: "ajax.php?id=" + id + "&action=add"
    })
    .done(function(){
        alert("Product has been added.");
    });
})

e.target指的是被点击的按钮。

Answer 3

因为你正在使用jQuery，所以你应该这样做。首先，删除PHP中的内联事件处理程序（例如onclick = \"executeJS()\"）

另一个问题是你的按钮没有数据属性但是他们的<i>孩子有。

接下来，创建jQuery事件处理程序，绑定到按钮。通过这样做你可以使用$(this).find('i')来获取fontawesone <i>元素及其数据属性.attr("data-id")：

$('button.addToCart').click(function() {
  var id = $(this).find('i').attr("data-id");
  $.ajax({
      type: "GET",
      url: "ajax.php?id=" + id + "&action=add"
    })
    .done(function() {
      alert("Product has been added.");
    });
})

jsFiddle example