如何通过赋予属性jQuery的值获取html元素

Posted 2023-05-09

【中文标题】如何通过赋予属性jQuery的值获取html元素

【英文标题】：how to get html element by the value given to an attribute jQuery

【发布时间】：2021-03-14 16:34:38

【问题描述】：

对于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 但逻辑没有按预期工作

【参考方案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>

【讨论】：

非常感谢，因为我仍然是 jquery 的菜鸟，所以我从你的回答中学到了很多东西