如何正确访问 HTML 元素的数据属性？

Question

我试图让星期几出现在我的 H2 元素中，但控制台显示 "cannot read property of fday undefined" 下面是我试图附加到的 HTML 元素和我的 JS我习惯这样做

<div class="flex-container col-xs-6" id="weekDay">
    <h2 data-fday="1"></h2>
    <h2 data-fday="2"></h2>
    <h2 data-fday="3"></h2>
    <h2 data-fday="4"></h2>
    <h2 data-fday="5"></h2>
</div>

for (var i = 0; i < 6; i++) { //Begin loop - loop over the object's next 5 days
    const weekly_forecast = data.daily.data;
    let today = moment().format('D MMM, YYYY');//Format the date in the form Day / Month / Year from moment.js library
    const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

    $('#day_'+[i]).append("<h3>"+weekly_forecast[i].apparentTemperatureMax + "<br></h3><P>" + weekly_forecast[i].summary + "</p>"); //append a <h2> within that div containing the day and <p> containing the high and low temperature for the day
        //Get the day of the week...
    let a = new Date(today); //parse current date
    let nextDay = weekday[a.getDay()+i]; //(get the day of the week)
    const dayData = $("#weekDay > h2").dataset.fday; //accessthe data-attribute of each H2 within #weekday
    if (dayData = [i]) {    //if the data attribute of the H2 element === i
        $(this).append(nextDay);    //append the current day of the week in the H2
    }

    console.log(nextDay);

}

Answer 1

dataset 不是 jQuery 对象属性，它是 dom 元素属性。

您还需要在循环中定位正确的元素索引

尝试改变

$("#weekDay > h2").dataset.fday

到

$("#weekDay > h2").eq(i).data('fday');

或作为 dom 节点访问属性

$("#weekDay > h2")[i].dataset.fday

Answer 2

使用 PURE JS 有两种方法。使用数据集或使用 getAttribute 方法。

var test = document.getElementsByTagName('li');
console.log(test[1].dataset.id);
var dataText = test[0].dataset.id + " " + test[1].dataset.id;
document.getElementById('target').innerHTML = dataText;


var dataTextAnotherApproach = test[1].getAttribute('data-id');
document.getElementById('target2').innerHTML = dataTextAnotherApproach;

<div id="test">
  <ul>
    <li data-id="data 1">Hello</li>
    <li data-id="data 2">Hello 2</li>
  </ul>
</div>
<div id="target"></div>
<div id="target2"></div>

如何正确访问 HTML 元素的数据属性？

How do I properly access the data-attribute of an HTML element?

html

javascript

jquery

custom-data-attribute