如何通过方括号括起来的文本输入将新值插入数据属性数组？答案

【问题标题】：How to insert a new value into a data-attribute array via text input which is wrapped by square bracket?如何通过方括号括起来的文本输入将新值插入数据属性数组？
【发布时间】：2021-04-02 10:00:09
【问题描述】：

我有一个包含数组的元素，如下面的代码
<div class="home_team" data-home='["10","20","30"]'></div>

当我从下面的输入中输入值时，我希望将值插入到上面的数组中。
<input type="text" /><button class="update_home_timeline">update</button>\

我设法插入了值（假设我输入了 100），但它如何删除数组中每个数据周围的方括号和分号并变成下面的代码
<div class="home_team" data-home="10,20,30100"></div>

   $('.update_home_timeline').on('click', function () {
        newInput = $(this).prev().val();
        $('.home_team').attr('data-home', dataHome + newInput);
    });

如何做到不删除方括号和分号，如下面的代码示例？
<div class="home_team" data-home='["10","20","30","100"]'></div>

【问题讨论】：

标签： jquery arrays custom-data-attribute

【解决方案1】：

var arr = [];
var total = [];
$('.update_home_timeline').on('click', function() {
  arr = [];
  newInput = $(this).prev().val();
  var str = $('.home_team').attr('data-home')
  var res = str.split(",");
  arr.push(newInput);
  var total = res.concat(arr);
    var x = total.toString();
  $('.home_team').attr('data-home', x);
  console.log('updated-data-in-element-data-home', $('.home_team').attr('data-home'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home_team" data-home="10,20,30,100"></div>
<input type="text" /><button class="update_home_timeline">update</button>

你可以这样做。为你提琴：https://jsfiddle.net/bogatyr77/h9rktxuz/21/

【讨论】：