获取每个span类的值并将字符串输入到输入

问题描述：

我有一个名为'tag-label'的跨度中的值列表。我希望添加每个跨度的值并将它们插入到用逗号分隔的输入字段中。获取每个span类的值并将字符串输入到输入

我已经设置了一个JSFiddle来显示它。 http://jsfiddle.net/stefanselby/7wrg611k/

我的HTML：

<label for="TagsHolder">Keywords</label> 
<ul> 
    <li><span class="tag-label">test 1</span></li> 
    <li><span class="tag-label">test 2</span></li> 
    <li><span class="tag-label">test 3</span></li> 
</ul> 
<input type="text" id="TagsHolder" name="TagsHolder" value="" /> 
<button id="btn">Update</button> 
<p></p> 
<p>This is what I require</p> 
<input type="text" id="TagsHolder2" name="TagsHolder2" value="test 1,test 2,test 3" />

我的JavaScript（我在哪里卡住）：

$(document).ready(function(){ 
    $("#btn").click(function(){ 
     $.each($('.tag-label'), function (index, value) { 
      $("#TagsHolder").val(index); 
     }); 
    }); 
});

答

您可以使用.map得到一个数组，然后再加入一个,

var values = $(".tag-label").map(function() { 
    return $(this).text(); 
}).get().join(","); 

$("#TagsHolder").val(values);

小提琴：http://jsfiddle.net/7wrg611k/3/

答

您的方法有几个问题。

index是当前元素的数组索引，而不是文本。

你的循环将替换值每遍，所以才有了最后的值会因为每个前次设置值可以看出将被替换

最好的办法是创建一个数组，并加入该数组：

$("#btn4").click(function() { 
    var values = $('.tag-label').map(function() { 
     return $(this).text(); 
    }).get().join(); 
    $("#TagsHolder").val(values); 
});

DEMO

获取每个span类的值并将字符串输入到输入

相关推荐