如何通过给定给属性jQuery的值来获取html元素

Question

对于forloop内的div元素，我给出了一个名为"prod_id"的属性，并将该属性的值设置为当前产品id

html

{% for product in products %}
<div prod_id={{product.id}}>
.....
</div>
<button prod={{product.id}}>
{% endfor %}

jquery

let product = $(button).attr('prod')
let fade_prod = $('div[prod_id = product]')
fade_prod.fadeOut('slow')

在jQuery的第二行中，我想将prod_id等同于product的值。我试过等同，但逻辑并没有像预期的那样工作

Answer 1

首先要注意，在HTML中应用自己的非标准属性可能会导致呈现和样式问题。值得庆幸的是，您可以使用data属性将自己的自定义元数据附加到元素。

从那里你可以简单地使用jQuery的prev()方法来针对与点击按钮相关的div：

$('button').on('click', e => {
let $button = $(e.target);
$button.prev('div').fadeOut('slow');
console.log($button.data('prod-id'));      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-prod-id="123">123</div>
<button data-prod-id="123">Click me</button>
<div data-prod-id="456">456</div>
<button data-prod-id="456">Click me</button>
<div data-prod-id="789">789</div>
<button data-prod-id="789">Click me</button>

如果您仍然希望通过元素的数据属性来定位元素，则可以使用属性选择器。您只需将中的值连接到选择器：

$('button').on('click', e => {
let prodId = $(e.target).data('prod-id');
$(`div[data-prod-id="${prodId}"]`).fadeOut('slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-prod-id="123">123</div>
<button data-prod-id="123">Click me</button>
<div data-prod-id="456">456</div>
<button data-prod-id="456">Click me</button>
<div data-prod-id="789">789</div>
<button data-prod-id="789">Click me</button>