如何通过方括号包裹的文本输入将新值插入数据属性数组？

Question

我有一个包含数组的元素，如下面的代码
<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>

JS

   $('.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>

Answer 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>

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

如何通过方括号包裹的文本输入将新值插入数据属性数组？

How to insert a new value into a data-attribute array via text input which is wrapped by square bracket?

jquery

arrays

custom-data-attribute