js 如何实现动态字符串拼接与删减

Question

我有一个选择列表

<input class="tag_input" type="checkbox" value="中国"/>    
<input class="tag_input" type="checkbox" value="美国"/>    
<input class="tag_input" type="checkbox" value="日本"/>    
<input class="tag_input" type="checkbox" value="法国"/>    
<input class="tag_input" type="checkbox" value="英国"/>

我要实现点击一个input 并且获取当前的value值，点击多个吧value值拼接用 符号/进分割结尾不要，这个很容易。
但是我需要取消选择后删除对应值,事项动态删减拼接的值，请问各位大佬有什么办法没？？？

我的代码

     var tag_name='';
    $('body').on('click', '.tag_input', function(e){
          tag_name += $(this).val() + '/';
    })
    console.log(tag_name)

Answer 1

简单的说，每次你修改之后都把所有选中的重新拼接一次就好了，不用去考虑逆向操作。

var tag_name = "";
$("body").on("click", ".tag_input", function(e) {
    tag_name = $(".tag_input:checked")  // 筛选所有选中的
        .map((i, tag) => $(tag).val())  // 取得值的列表
        .toArray()                      // 从 jQuery 对象转换成标准数组
        .join("/");                     // 拼接成字符串
});

Answer 2

如果是纯粹是解决这个问题，我赞同 @边城 的方法，每次点击都查一次被选中的值就可以了。

但是，我想说，什么年代了，考虑一下数据驱动架构吧，Vue.js 了解一下，可有效解放你的劳动力。

Answer 3

可以把点击的放进数据中
反选直接通过 indexOf 和 slice 删除就行

最后通过 join(‘/’) 完成拼接

Answer 4

思路：

1. 一个储存数据的data，增加和删减只是调用getData这个方法来 修改这个数组的内容
2. 一个渲染方法，根据data 数据渲染你要的视图（即你的 tag_name字符串）

伪代码如下：

var data = []

function getData(tagName) {}

function renderStr(data) {
    ...
    return str
}

$('body').on('click', '.tag_input', function(e){
      var tagName = $(this).val()
      getData(tagName)
      var tag_name = renderStr(data)
})

Answer 5

其实楼上两位说的都行，下面得程序你可以参考。

<script>
    // 声明一个对象来维护你得数据
    function DataHolder() {
        this.__data_holder = []

        this.getter = function () {
            return this.__data_holder
        }

        this.add = function (val) {
            this.__data_holder.push(val)
        }

        this.del = function (val) {
            let __index = this.__data_holder.indexOf(val)
            if (__index > -1) {
                this.__data_holder.splice(__index, 1)
            }
        }
    }

    let my_data_holder = new DataHolder()
    // 向对象中添加数据
    my_data_holder.add('中国')
    my_data_holder.add('美国')
    my_data_holder.add('英国')
    my_data_holder.add('法国')
    console.log(my_data_holder.getter())
    // 删除英国
    my_data_holder.del('英国')
    console.log(my_data_holder.getter())
    // 以 ‘/ ’分隔得字符串
    console.log(my_data_holder.getter().join('/'))
</script>

Answer 6

完美解决

function getTotal(){
            var tagName = $('input[type=checkbox]:checked').map(function(){
                return this.value
            }).get().join(',');
             tag_name=tagName;
        };