javascript - 获取 data-* 属性的值并设置它们的列表

Question

我试图给一个元素一个数据属性，他们通过 id 该元素并尝试访问数据，但没有成功，也许它与 HTML 的显示方式有关，我的意思是:

<div class="col-md-2 col-sm-12 col-xs-12 ">
    <table>
        <thead>
            Servicios
            <tr>
                @foreach (var feature in hotel.Features.Take(6)) {
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listServices="@feature.Code">
                    @feature.Description
                </td>

                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                if (counter % 2 == 0) { @:
            </tr>
            <tr>
                } counter++; }
            </tr>
        </thead>
    </table>
</div>

这是我的 html 代码，它的渲染方式如下:

<div class="col-md-2 col-sm-12 col-xs-12 ">

    Servicios
    <table>
        <thead>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="APCO">
                    Aptos./Hab. con cocina
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="CAFE">
                    Cafetería
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="CFTE">
                    Caja fuerte individual
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="ITNS">
                    Punto de Internet
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="JARD">
                    Jardines /Terraza
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
                <!-- DATA-* LISTA SERVICIOS-->
                <td class="col-md-6 showTruncateText" id="serviciosHotel" data-listservices="JUEG">
                    Parque infantil
                </td>
                <!--Esta pieza hace que se genere filas con 3 elementos. Una vez llega al
                    tercero, empieza otra fila.-->
            </tr>
            <tr>
            </tr>
        </thead>
    </table>
</div>

到目前为止，一切都很好，但是在 js 部分我得到了错误的答案，我的意思是我已经尝试了很多方法，但我得到的最接近的是 null 和 未定义。

    var dataServicios = document.querySelector('serviciosHotel').dataset;
    for (var i in dataServicios) {
        console.log(i, dataServicios[i])
    };
    var listaServicios = document.getElementById('serviciosHotel');
    var listaServicios2 = listaServicios.getAttribute('data-listservices');
    console.log(listaServicios2);

    var dataServicios2 = document.getElementById("serviciosHotel");
    var nombreServicio = dataServicios2.dataset.listServices;
    console.log(nombreServicio);

    var serviciosdelhotel = document.getElementById("serviciosHotel");
    var ratings = serviciosdelhotel.getAttribute("data-listServices");
    console.log(ratings);

    JQUERY
    var servicioshotelenrique = $("#serviciosHotel");

    var owner = servicioshotelenrique.data("listServices");
    console.log(owner);
    var dataServicios = $('#serviciosHotel').data();

    for (var i in dataServicios) {
        $('<li>', {
            text: i + ': ' + data[i]
        }).appendTo('#out');
    }
    console.log(dataset(document.getElementById('serviciosHotel')[0]));
    $("#serviciosHotel").click(function () {

        var id = $(this).attr('data-listServices');
        console.log(id);
    });
    console.log($("#serviciosHotel").data("listServices"));

我做错了什么？这是我第一次使用数据属性，应该不难，但是……你知道我看不清楚。 非常感谢!!

Answer 1

注意你的首都。数据属性区分大小写。

console.log($("#serviciosHotel").data("listServices"));

应该是

console.log($("#serviciosHotel").data("listservices"));

然后就可以了。