尝试使用 jquery 更新数据元素

Question

我让代码运行在我试图使用 jquery 替换某些值的地方

这是我的按钮

<button data-class="update" type="button" name="update" class="action" data-pk="RS" 
        id="update" data-columns="RRC,TTR,N">Create</button>

我有这个代码，在单选按钮上单击时，我想更新数据属性，其中 data-pk 将被替换为数据列中的值之一，并且 data-pk 值将被添加到数据列中

这样一种为一个属性增加价值，反之亦然

数据列是一个列表，所以这就是我卡住的地方

$('input[name="primarykey"]').click(function() {
  $("#action").data('pk',$(this).val());
}); 

我可以添加这个值，这将覆盖其他现有值，但我想复制该值并将其添加到 data-columns 并从将添加到此 data-pk 的数据列中删除该值

Answer 1

几件事：

1. 您尝试以id (#) 的身份访问action，您必须为该元素设置id 属性。
2. 使用 .data() 不会为你更新 DOM (src: JQuery data selector not updating with .data)

   jQuery .data() 最初是用 data- 属性中的值填充的，但设置它只会将相关的新值存储在内存中。它不会更改 DOM 中的属性。要更改属性，您必须使用：

3. 通过使用.attr()，您可以更改DOM 并更改data-pk 和data-columns 的值。

let el = $('#action');
const options = $.map($('input[name="primarykey"]'), e => e.value);

$('input[name="primarykey"]').click(function() {
  el.attr('data-pk', $(this).val());
  el.attr('data-columns', options.filter(e => e !== $(this).val()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-class="update" type="button" name="update" id="action" data-pk="RS" id="update" data-columns="RRC,TTR,N">Create</button>

<input type='radio' name='primarykey' value='RRC'>
<input type='radio' name='primarykey' value='TTR'>
<input type='radio' name='primarykey' value='N'>
<input type='radio' name='primarykey' value='RS' checked>

希望这会有所帮助，