1

li- タグの値を入力に書き込もうとしましたが、問題は oneli し​​か追加されないことです。li- の複数の値がコンマで区切られて追加されるようにするにはどうすればよいですか? また、各 li-value を 1 回だけ追加できるとよいでしょう。ありがとう、そして申し訳ありませんが、私はまったく知識がありません!

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

これは大雑把ですが、実用的なソリューションです。

最初に、それが最初のエントリかどうかを確認します。はいの場合,、フロントにはありません。,そうでない場合は、 +を追加します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 に答える
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 に答える
1

$(this).html()orthis.innerHTMLの代わりに使用する$("li").html()と、すべての li が選択され、コレクション内の最初の 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(';');
    }); 
});

デモ

于 2013-06-24T20:03:21.543 に答える