Question

我有这个HTML：

paypal.Button.render({
  env: 'sandbox', // Or 'sandbox',

  commit: true, // Show a 'Pay Now' button

  style: {
    color: 'gold',
    size: 'small'
  },

  payment: function(data, actions) {
    // Set up a url on your server to create the payment
    var CREATE_URL = 'http://127.0.0.1:8080/payment/generate';

    // Make a call to your server to set up the payment
    return paypal.request.post(CREATE_URL)
      .then(function (res) {
        console.log("PAYMENT: ", res);
        return res.paymentID;
      });
  },

  onAuthorize: function(data, actions) {
    // Set up a url on your server to execute the payment
    var EXECUTE_URL = 'http://127.0.0.1:8080/payment/execute';

    // Set up the data you need to pass to your server
    var data = {
      paymentID: data.paymentID,
      payerID: data.payerID
    };

    // Make a call to your server to execute the payment
    return paypal.request.post(EXECUTE_URL, data)
      .then(function (res) {
        window.alert('Payment Complete!');
      });
  }

}, '#paypal-button');

我正在尝试获取范围中<span class="price" itemprop="price" content="66.00">66.00</span>数据属性的值，但我不断获取 未定义 而不是价格值。

我尝试过使用content，$(".price").data("content")，$(".price").attr("content")和纯JavaScript $(".price").prop("content");但是所有这些都返回 undefined 。

获得实际价值的唯一方法是，当网页上只有一个产品时，我会在范围中添加 ID 并使用document.querySelector('.price').dataset.content。

我创建了一个JSFiddle：https://jsfiddle.net/01kqoje7/9/。在这个小提琴中，document.getElementById('price').getAttribute("content")变量是唯一给出值的变量，但在我的代码中，即使是jQuery的attr（）也没有给我定义。

当我尝试访问班级的数据属性时，为什么会出现未定义的内容？

P.S。我无法控制数据属性的命名约定。

Answer 1

如果您知道要查找的属性是content，则可以使用jQuery has attribute selector：

例如：

// will select ALL items with content attribute:  
$('[content]').attr('content');

如果您知道只需要具有特定类的项目，则可以将类和属性选择器组合在一起，如下所示：

// will select items with content attribute that have the price class:
$('.price[content]').attr('content');

正如其他人所提到的，使用$('.price').data('content')要求该属性以data-为前缀（例如data-content="66.00"），并且不能在这种情况下使用。

Answer 2

应改为data-content：

<span class="price" itemprop="price" data-content="66.00">66.00</span>

注意： $(".price2").attr("content")应该可以在元素加载到DOM时起作用，所以尽量让你在ready函数中执行你的代码，如：

$(function() {
     //Your logic here
});

$(function() {
  console.log( $(".price").data("content") );
  console.log( $(".price2").attr("content") );
  console.log( document.querySelector('.price').dataset.content );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="price" itemprop="price" data-content="66.00">66.00</span>
<span class="price2" itemprop="price" content="22.00">22.00</span>

jQuery data（）和attr（）方法以及JavaScript数据集属性返回undefined

2 个答案: