如何正确地select一个div呢？

Question

我有一个产品列表，每个产品都显示在 div 中，如下所示：

<div data-productSheetId="n" class="productSheet"></div>

我目前的 select 或者是：

var productSheet = $('[data-productSheetId="' + $(this).data('productSheetId') + '"]');

我很确定我做错了，我怎么能 select 正确呢？

Answer 1

var x = 5;

var productSheet = $('div[data-productSheetId =' + x + ']');

这会很有效。只需在选择时更改变量x。

Answer 2

您可以使用.filter()方法：

var productSheet = $("div.productSheet").filter(function() {
    return $(this).data("productsheetid") == "n";
});

更新:

感谢@mplungjan。数据属性应该全部小写。现在，当属性有连字符时，可以使用驼峰式等价物来读取数据：

//<div data-productsheetid="n" class="productSheet"></div>
//use:
.data('productsheetid')

//<div data-product-sheet-id="n" class="productSheet"></div>
//use either:
.data('product-sheet-id')
//or:
.data('productSheetId')

Answer 3

你可能是想

具有全小写属性
使用数据属性 select 产品表的 ID

像这样

<div id="xxx" class="productSheet"></div>
<div id="yyy" class="productSheet"></div>
<div id="zzz" class="productSheet"></div>

<button class="btn" type="button" data-productsheetid="xxx">Select XXX</button>

$(function() {
  $(".btn").on("click",function() { 
    // get the id to access from the button's data attribute
    var id = $(this).data("productsheetid"); // for readability
    var productSheet = $("#"+id);
  });  
});

Answer 4

只需小写您的密钥：

productSheet = $('[data-productSheetId="' + $(this).data('productsheetid') + '"]');

您使用的驼峰式键 (productSheetId) 用于

等属性

 <div data-product-sheet-id="n" class="productSheet"></div>

如何正确地select一个div呢？

How to properly select a div with this?

javascript

jquery

this