通过 Jquery 向 HTML 元素添加属性

Question

我正在使用 wordpress 并且无法通过主题将自定义属性添加到 HTML 元素。 我发现它可以通过 Jquery 完成，但这对我没有帮助。

我想在加载时添加到 HTML 元素的属性（无需单击任何特定内容）：

data-tf-popup="Vxs1VOeK" 
data-tf-hide-headers="" 
data-tf-transitive-search-params="utm_source, utm_medium,utm_campaign,utm_term,utm_content" 
data-tf-iframe-props="title=Dermatologo konsultacija internetu - iDerma" 
data-tf-medium="snippet" 
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx" 

我要添加它的特定按钮/项目。 目前它有 Ahref，但我将删除 ahref，以保持其为空。

<li id="menu-item-37" class="menu-singup menu-item menu-item-type-custom menu-item-object-custom menu-item-37" data-tf-popup="Vxs1VOeK"><a href="https://form.typeform.com/to/Vxs1VOeK">Pradėti konsultaciją</a></li>

任何帮助将不胜感激！

Answer 1

您可以通过 jQuery 的.attr() function添加属性。 第一个参数确定您要添加的属性，而第二个参数是所述属性的值。

例子：

$(document).ready(() => {
  $('#element_id').attr('data-tf-popup', 'Vxs1VOeK');
  $('#element_id').attr('data-tf-hide-header', '');
  // ...
});

您可以通过使用 JSON 对象使其更清洁：

$(document).ready(() => {
  const attr = {
    'data-tf-popup': 'Vxs1VOeK',
    'data-tf-hide-header': '',
    'data-tf-transitive-search-params': 'utm_source, utm_medium,utm_campaign,utm_term,utm_content',
    // ...
  }
  
  for (let key in attr) {
    $('#element_id').attr(key, attr[key]);
  }
});