Question

我试图让一周中的某些日子出现在我的H2元素中，但控制台说＆＃34;无法读取fday未定义的属性＆＃34;下面是我试图追加的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元素的数据属性？

2 个答案: