Question

我想从多个字符串创建一个地图。每当输入字符串发生变化时，地图都会相应地改变。

我有一个简单的问题，我似乎无法修复。以下是简化版本：

HTML：

<div class="boo-card-link" data-href="card-1">
    <input type="text" id="filter_tags" name="filter_tags" value="tags11,tags12">
</div>
<div class="boo-card-link" data-href="card-2">
    <input type="text" id="filter_tags" name="filter_tags" value="tags21,tags22">
</div>
<div class="boo-card-link" data-href="card-3">
    <input type="text" id="filter_tags" name="filter_tags" value="tags31,tags32">
</div>

JS想法：第1部分：将所有 #filter_tags 值合并到 window.hint_arr 值

var $ = jQuery;
window.hint_arr = function(){
    var array_filter_tags       = [];
    var count                   = 1;
    $(".boo-card-link").each(function(){
        var id                  = count;
        var tmp_filter_tags     = $("#txtfilter_tags").val();
        tmp_filter_tags         = tmp_filter_tags.replace(/\s/g, '');
        var json_filter_tags    = tmp_filter_tags.split(',');
        count++;
        array_filter_tags       = $.merge(array_filter_tags, json_filter_tags).unique();
    });
    array_filter_tags = array_filter_tags.join();
    return array_filter_tags;
};
window.hint_arr(); //result: tags11,tags12,tags21,tags22,tags31,tags32

第2部分：将字符串值转换为地图

var Convert = function() {
    var json = [];
    var to = ""+window.hint_arr();
    var toSplit = to.split(",");
    for (var i = 0; i < toSplit.length; i++) {
        json.push({"num":toSplit[i]});
    }
    a = function() {
        console.log(json);
    };

    return {
        init: function() {
            a()
        }
    }
}();
Convert.init(); //result: [{num:'tags11'},{num:'tags12'},{num:'tags21'},{num:'tags22'}...]

直到这一步，一切都很好。我遇到的问题是，在更改任何输入的值时，会出现一个名为＆＃34; json＆＃34;不会相应改变。

$('#filter_tags').on('change', function() {
    console.log(window.hint_arr());
});
$('#filter_tags').trigger('change');

例如，当第一个输入将值从 value =＆＃34; tags11，tags12＆＃34; 更改为 value =＆＃34; tags11，tags12，tags13＆＃34; ，window.hint_arr（）的结果已更改为＆＃39; tags11，tags12，tags13，tags21，tags22，tags31，tags32＆＃39; 但地图 json 常数。我试图回忆一下Convert（）函数，但似乎没有回复我正在寻找的东西

关于如何实现这一目标的任何想法？。

Answer 1

我觉得只要使用Array.map()和(jQuery) .map()

就可以大大简化您的逻辑

当元素的值已更改but after you leave the element时，会发生onchange事件。

＆＃13;

// taken from another post
Array.prototype.unique = function() {
  var a = [];
  for (var i = 0, l = this.length; i < l; i++)
    if (a.indexOf(this[i]) === -1)
      a.push(this[i]);
  return a;
}

// note 1: json is defined globally

var json = [];

$(function() {

  var inputs = $('input[name=filter_tags]').on('change', function() {
    // get all values e.g. 'tags11,tags12,tags21,tags22,tags31,tags11'

    // note 2: .get() is to convert jQuery array to normal array
    // note 3: .join() is to join all the values in the normal array

    var values = inputs.map(function() {
      return this.value.replace(/\s/g, '');
    }).get().join(',');

    // console.log(values);

    // split all values and remove dups e.g. ['tags11','tags12','tags21','tags22','tags31']

    var tags = values.split(',').unique();

    // console.log(tags);

    // convert tags e.g. [{ num: 'tags11' }, { num: 'tags12' }, ...]

    // note 4: this is not jQuery .map(), but Array.map()


    json = tags.map(function(tag) {
      return {
        'num': tag
      };
    });

    console.log(json);

  });

  // trigger change
  inputs.eq(0).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boo-card-link" data-href="card-1">
  <input type="text" name="filter_tags" value="tags11 ,tags12  ">
</div>
<div class="boo-card-link" data-href="card-2">
  <input type="text" name="filter_tags" value="tags21,tags22">
</div>
<div class="boo-card-link" data-href="card-3">
  <input type="text" name="filter_tags" value="  tags31, tags11">
</div>

＆＃13;

Array.unique（）取自this answer。

从多个字符串创建一个映射。只要输入字符串发生更改，映射就会相应更改

1 个答案: