使用其他属性在 JQuery 中添加属性答案

【问题标题】：Adding attribute in JQuery using other attributes使用其他属性在 JQuery 中添加属性
【发布时间】：2023-03-24 22:22:01
【问题描述】：

使用 jQuery，如何使用 URL 的其他属性将属性添加到 URL 中？

例如，我们有以下网址：

<a class="someclass" data-a="X">
<a class="someclass" data-a="Y">

然后使用现有的添加以下属性：

<a class="someclass" data-a="X" data-b="string1+data-a" data-c="string2+data-b">
<a class="someclass" data-a="Y" data-b="string1+data-a" data-c="string2+data-b">

请注意，多个 URL 具有相同的 class="someclass"。

【问题讨论】：

你应该使用data attributes
attr-a 是无效的 HTML5 属性，就像 ng-* 和其他属性一样。使用data-adata-b等
在 jQuery 中很简单，就像在谷歌上搜索 "jQuery 数据属性" 并且看起来像 $("[data-a]").data({b: `${string1}${x}`, c: `${string2}${string1}${Y}`})
即使在您编辑之后，attribute-* 仍然是无效的 HTML5 属性。使用data-* 属性。
当然。但是，这只是一个例子。

标签： javascript jquery html tags attr

【解决方案1】：

如果您想要导出其他数据属性，您可以遍历它们并设置属性。如果您的逻辑稍后使用data() 来读取值，您可能希望使用data() 来设置它们，而不是我在下面的示例中使用的attr()。

$('.someclass').each(function(_, element){
  const $element = $(element);
  const a = $element.data('a');
  const b = 'string1'+ a;
  const c = 'string2'+ b;
  
  $element.attr('data-b', b);
  $element.attr('data-c', c);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="someclass" data-a="X">X</a>
<a class="someclass" data-a="Y">Y</a>

【讨论】：

非常感谢@Taplar，我不想稍后再阅读该值。所以，我认为 attr() 应该没问题。那么，如何循环它以将相同的功能应用于具有相同类的第二个、第三个、.. 锚元素？
什么意思？它已经遍历了具有相同类的所有元素
对不起，得到我的答复。再次感谢。
如果它解决了您的问题，请将此答案标记为正确。所以它也会帮助其他用户。

【解决方案2】：

您应该使用 data-a、data-b 而不是 attribute-a、attribute-b。

<a class="someclass" data-a="X">
<a class="someclass" data-a="Y">

使用 jquery，您可以使用以下方法获取元素：

var element = $('a[data-a="X"]');

添加新的数据属性：

element.data('b', 'string1'+element.data('a'));

获取新的数据属性

alert('Test: ' +element.data('b'));

您可以看到它正在运行：https://jsfiddle.net/aw4es259/

【讨论】：