1

我试图将li-tag的值写入输入，我的问题是它只添加了oneli。我怎样才能实现 li- 的多个值以逗号分隔！如果每个 li- 值只能添加一次，那就太好了！谢谢，对不起，我绝对没有知识！

http://jsfiddle.net/QNtbp/

<div>
<ul>
<li>Item1</li>
<li>item2</li>
<li>Item3</li>
</ul>
</div>
<input type="text" id="meinOutput"/>


$("li").click(function() {
var selects = $("li").html();
$("#meinOutput").val(selects);
});
4

4 回答 4

3

尝试var selects = $(this).html();应该做的工作

原因是$('li')它将返回所有适合选择器的对象，因此html()只会访问该列表的第一个元素。this在该方法的范围内，是对点击发生的那个元素的引用。

http://jsfiddle.net/QNtbp/5/

如果你想追加你必须使用

var selects = $("#meinOutput").val() + $(this).html();

此外，如果你想用逗号分隔项目，你应该检查 val 是否为空，如果不是用逗号附加新的 html：

var old = $("#meinOutput").val();
var selects = old == "" ? $(this).html() : old + "; " + $(this).html();`

为了只在有各种方法时允许每个值。例如，您可以创建一个数组，在其中插入您已经添加到文本中的 lis，并检查是否添加了新的，或者如果 lis 的内容是唯一的，您可以检查内容是否已经是出现在输出中。

于 2013-06-24T20:02:57.343 回答
3

这是粗略但有效的解决方案。

首先，我检查它是否是第一个条目。如果是，,前面没有。如果不是，那么我们附加,+ value of clicked item。

我认为代码是不言自明的，所以我将其包含在此处。如果您想看到它的实际效果，这里有一个JSFIDDLE

HTML

<div>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<input type="text" id="Output"/>
</div>

Javascript

$(document).ready(function(){
    $("li").click(function(e){
        var sel = $(this).html();
        if($("#Output").val().length==0)
        {
           $("#Output").val(sel);
        }
        else
        {
           $("#Output").val($("#Output").val() + ", " + sel);
        }
    });
});

CSS（好吧！当然没有必要，但我有点喜欢这只手 :)）

li:hover
{
cursor:hand;
cursor:pointer;
}

希望这有一些用处。

于 2013-06-24T20:28:28.840 回答
2

向输入值添加新值和逗号，如下所示：

$("li").click(function() {
    var sel = $(this).text();

    $("#meinOutput").val(function(i, v) { 
        var p = v.length ? v.split(','):[];

        if( $.inArray(sel, p) == -1 ) 
            p.push(sel);
        return p.join(',');
    });
});

小提琴

于 2013-06-24T20:05:33.430 回答
1

使用$(this).html()orthis.innerHTML代替$("li").html()它将选择所有 li 并为您提供集合中第一个的 html。好的，我错过了重复的部分，所以编辑答案：

$("li").click(function() {
    var selected = this.innerHTML;
    $("#meinOutput").val(function(_, curText){
        var ct = !curText.length ? [] : curText.split(';');
        if($.inArray(selected, ct) > -1) return curText;
        ct.push(selected);
        return ct.join(';');
    }); 
});

演示

于 2013-06-24T20:03:21.543 回答