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

FlexUI
  • 98

我有一个选择列表

<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)
回复
阅读 2.3k
6 个回答

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

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

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

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

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

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

思路:

  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)
})

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

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

完美解决

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

宣传栏