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");但我得到的是一个标题 undefined 作为data-id。

id=undefined&action=add

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

感谢

Answer 1

看起来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 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想使用基于点击符号的字符串，请明确传递您的元素，并执行$(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 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

$（this）.attr（＆＃34; data-id＆＃34;）返回undefined

3 个答案: