JQuery только выберите один li

Question

Я попытался записать значение лига тега на вход, моя проблема в том, что он только добавляет oneli. Как я могу добиться того, что несколько значений 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); 
}); 

Answer 1

Добавить новые значения и запятые значения входов, как так:

$("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(','); 
    }); 
}); 

FIDDLE

Answer 2

попробовать var selects = $(this).html();, которые должны сделать работу

Резон для этого является то, что $('li') будет возвращать все объекты, которые соответствуют селектор, и поэтому html() будет доступ только первый элемент этого списка , this находится в противоречии метода, ссылаясь именно на тот элемент, с которым происходит щелчок.

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

если вы хотите добавить, вы должны использовать

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

Кроме того, если вы хотите иметь пункты через запятую вы должны проверить, если вал пуст, и если не добавить новый html с запятой:

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

ради того, чтобы разрешить любое значение только один раз, существуют различные подходы. например, вы можете создать массив, в который вы вставляете lis, который вы уже добавили в текст, и проверить, были ли они добавлены, если новый был нажат - или если содержимое lis уникально, вы можете просто проверить, присутствующих в выходе.

Answer 3

$(this).html() или this.innerHTML вместо $("li").html(), который выберет все лики и предоставит вам html первого в коллекции. Ok я пропустил дубликата часть поэтому редактирование ответ:

$("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(';'); 
    }); 
}); 

Demo

Answer 4

Здесь грубое, но рабочее решение.

Сначала я проверяю, была ли эта запись первой. Если да, то нет , спереди. Если нет, добавим , + 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; 
} 

Надеюсь, что это был полезен.