$(this).attr( "data-id" ) 返回未定义

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");，但我所得到的只是一个标题， undfined 作为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>

如果要使用基于单击符号的字符串，请明确传递元素，然后执行$(element)。

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

javaScript：

function executeJS(element){
    var id = $(element).data('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

使用常规函数（function(){}）而不是箭头功能：

$(document).on("click",".deleteBtn",function(){
    //Your Code
});

Answer 4

由于您使用的是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示例