如何通过赋予属性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 等同于产品的值。我试过 equate 但逻辑没有按预期工作

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>