获取data-*属性的值并设置它们的列表
获取data-*属性的值并设置它们的列表
提问于 2020-01-16 17:09:27
我试图给一个元素一个数据属性，他们通过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和undefined。
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"));我做错了什么？？这是我第一次使用数据属性，并不是很难，but...you知道我看不清楚。非常感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-16 17:16:10
注意你的大写字母。数据属性区分大小写。
console.log($("#serviciosHotel").data("listServices"));应该是
console.log($("#serviciosHotel").data("listservices"));然后它就起作用了。
Stack Overflow用户
发布于 2020-01-16 17:23:20
根据我的说法，您编写了太多的JS代码来检索来自后端模型的数据(或者可能hotel变量是一个注入的服务？)。
考虑到数据来自您的后端模型，一个很好的解决方法是在CSHTML文件中编写以下代码。
<script>
var model = @Html.Raw(Json.Serialize(Model));
</script>如果您的JS在一个单独的文件中，您可以将数据存储在一个隐藏的HTML元素中。
您还可以将JS代码放在JS类中，并在构造函数参数中注入数据，如下所示：
<script>
var view = new NameOfTheViewClass(@Html.Raw(Json.Serialize(Model)));
view.init();
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59766221
复制相关文章
相似问题
腾讯云开发者
