如何使用数据属性提取数据?
How to pull in data by using a data-attribute?
我正在尝试使用 data-
html 技巧从我们的 API 中提取数据。我可以直接调用数据并且它加载得很好。但是当我尝试从数据属性中获取数据变量时,它不起作用。
我的代码有什么缺陷吗?
即
<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance">--</span>
function dataAPI() {
let balanceUrl = 'https://api.example.io/v1/user/getbalance/username';
let balanceApiData = getApiData(balanceUrl);
$('[data-api-user-getbalance]').each(function (){
let dataUserBalance = $(this).data("api-user-getbalance");
let data = balanceApiData.dataUserBalance;
// WORKS
$(this).html(balanceApiData.totalBalance);
// DOES NOT WORK
$(this).html(balanceApiData.dataUserBalance);
});
}
1. jQuery 的 .data()
删除了 data-
前缀并且 将剩余的带连字符的字符串转换为驼峰式,使用破折号作为分隔符。应该是:
let dataUserBalance = $(this).data("apiUserGetbalance");
2. 要使用变量访问对象 属性,您需要使用 bracket notation。否则,您将尝试获取不存在的 属性 "dataUserBalance"
。
let data = balanceApiData[dataUserBalance];
const balanceApiData = { totalBalance: 500 };
const $elem = $("#totalBalanceBTC");
let dataUserBalance = $elem.data("apiUserGetbalance");
let data = balanceApiData[dataUserBalance];
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance"></span>
我正在尝试使用 data-
html 技巧从我们的 API 中提取数据。我可以直接调用数据并且它加载得很好。但是当我尝试从数据属性中获取数据变量时,它不起作用。
我的代码有什么缺陷吗?
即
<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance">--</span>
function dataAPI() {
let balanceUrl = 'https://api.example.io/v1/user/getbalance/username';
let balanceApiData = getApiData(balanceUrl);
$('[data-api-user-getbalance]').each(function (){
let dataUserBalance = $(this).data("api-user-getbalance");
let data = balanceApiData.dataUserBalance;
// WORKS
$(this).html(balanceApiData.totalBalance);
// DOES NOT WORK
$(this).html(balanceApiData.dataUserBalance);
});
}
1. jQuery 的 .data()
删除了 data-
前缀并且 将剩余的带连字符的字符串转换为驼峰式,使用破折号作为分隔符。应该是:
let dataUserBalance = $(this).data("apiUserGetbalance");
2. 要使用变量访问对象 属性,您需要使用 bracket notation。否则,您将尝试获取不存在的 属性 "dataUserBalance"
。
let data = balanceApiData[dataUserBalance];
const balanceApiData = { totalBalance: 500 };
const $elem = $("#totalBalanceBTC");
let dataUserBalance = $elem.data("apiUserGetbalance");
let data = balanceApiData[dataUserBalance];
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance"></span>