Question

我希望有人可以帮我解决这个问题......我按照教程：http://jsbin.com/hehurot/5/edit?html,css,js,console,output在HTML表单上创建了一个包含标签的字段。现在，当我单击表单上的提交时，我想用标签抓取该字段中的数据并对其执行某些操作（保存到数据库）。

我如何从字段中获取数据，因为每个标记都是？

以下是我目前的代码字段代码：

<div class="form-group">
    <label class="col-sm-3 control-label">Equipment</label>
    <div id="tags" class="col-sm-9">
       <span>Hardhat</span>
       <span>Steel Toe Boots</span>
       <input id="equipment" type="text" name="equipment" value="" placeholder="Add equipment" >
    </div>
</div>

JS使标记字段起作用（CSS在上面的链接中可用）

<script type="text/javascript">
      $(function(){ 
        $("#tags input").on({
          focusout : function() {
            var txt= this.value.replace(/[^a-z0-9\+\-\.\#]/ig,'');
            if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this});
            this.value="";
          },
          keyup : function(ev) {
            if(/(188|13)/.test(ev.which)) $(this).focusout(); 
          }
        });
        $('#tags').on('click', 'span', function() {
          /*if(confirm("Remove "+ $(this).text() +"?")) */$(this).remove(); 
        });
      });
</script>

现在在我的JS文件中，如何将值保存为单独的？

我尝试了以下但是这不起作用，返回空字符串：

'equipment': $('#tags').val()

提前感谢您的帮助！

Answer 1

试试这个：

var tags = $('#tags span').map(function () {
  return $(this).text();
});

随访：

我修改了一下，将所有值保存到以逗号分隔的列表中。

var tags = $('#tags span').map(function () {
  return $(this).text();
});

tags = Array.prototype.join.call(tags, ",");
console.log(tags);

后续问题，在Javascript中如何添加标签编程？我想循环逗号分隔列表和将每个值添加回标签。

$('#tags').append(tags.split(",").map(function (tag) {
  return "<span>" + tag + "</span>";
}));

Answer 2

使用jQuery的.each() http://api.jquery.com/each/：

a = []; $('#tags > span').each(function(){a.push(this.innerHTML)});

// a => ["php", "c++", "jquery"]

如何以编程方式添加<span>标记？我想循环以逗号分隔的列表，并将每个值添加回<span>标记。

使用jQuery.each() http://api.jquery.com/jQuery.each/：

$.each(["php", "c++", "jquery"], function(i,v){
  $('#tags').prepend($(document.createElement('span')).text(v))
});

在HTML / JavaScript中获取多个<span>标签的价值？

2 个答案: