4

ユーザーがコピーして別のアプリケーションに貼り付けることができるカンマ区切りのリストを DOM に挿入しようとしています。現在、コンマが前にない最初の要素を処理する方法に完全に行き詰まっています。

現在、ユーザーが要素をクリックすると、jquery が要素の ID を取得してリストを作成します。ユーザーは、選択のオンとオフを切り替えることができる必要があります。また、ユーザーがアイテムを選択する順序でリストを生成する必要があります。

HTML

Comma separated list here: <span id="list"></span>
<br />
<a id="1" class="clickme" href="#"><li>One</li></a>
<a id="2" class="clickme" href="#"><li>Two</li></a>
<a id="3" class="clickme" href="#"><li>Three</li></a>
<a id="4" class="clickme" href="#"><li>Four</li></a>
<a id="5" class="clickme" href="#"><li>Five</li></a>
<a id="6" class="clickme" href="#"><li>Six</li></a>

CSS

.selected {
    background-color: #99CCFF;    
}

JS - jquery が読み込まれます

$('.clickme').click(function (e) {
        e.preventDefault();
        var book_id = $(this).attr('id'); 
        $(this).children('li').toggleClass("selected");
        var list_container = $("#list");
        if ($(this).children('li').is(".selected")) {
            if (list_container.text().length > 0) {
                list_container.append("," + book_id);
            } else {
                list_container.append(book_id);
            }
        } else {
            list_container.text(list_container.text().replace("," + book_id, ""));          
        }
});

これは、カンマ区切りのリストを作成するのにうまく機能し、リストの最初の値以外をすべてオフに切り替えるのにうまく機能します。問題は、最初の値が前のコンマなしで挿入されたため、置換関数が一致しないことです。置換関数からコンマを削除すると、不要なコンマがたくさん残ります。両方を一致させると、ID の一部が一致するリスクがあります。つまり、3 がオフになっているときに 3 in 13 を置き換えます。

たくさんのバリエーションを試しましたが、うまくいくものを見つけることができません。

望ましい結果が得られた私の唯一の解決策は、CSS を使用してコンマを挿入し、挿入された ID をスパン要素でラップすることでした。

CSS トリック

#list span { display: inline; }
#list span:after { content: ","; }
#list span:last-child:after { content: ""; }

これの実際の目的を除いて、うまくいきました。ユーザーが生成された文字列をコピーして貼り付けることができるようにする必要があります。CSS を使用してコンテンツを生成する場合、ほとんどのブラウザの DOM レベルのクリップボードには表示されません。IE はブラウザに表示されるとおりに文字列をコピーし、FF と Safari はどちらも CSS にコンマを追加せずに文字列をコピーしました。

フィドルはこちら

4

2 に答える 2

6

この問題を複雑にしすぎているようです。選択した書籍 ID の配列を作成し、.join(',')それらをカンマ区切りのリストとして表示するために使用するだけです。

$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");
    var book_ids = $('.clickme:has(li.selected)').map(function(){
        return this.id;
    }).get();

    list_container.text(book_ids.join(','));
});

デモ: http://jsfiddle.net/rYu6m/2/

編集:要素がクリックされた順序で保持したいと言います。その場合、クリック ハンドラーの外側で配列を宣言してから.push、要素をその上または外に宣言する必要があります.splice。文字列を操作するよりも、配列を操作する方がはるかに簡単です。

var book_ids = [];
$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");

    var index = $.inArray(this.id, book_ids);
    if(index === -1){
        // Not in array, add it
        book_ids.push(this.id);
    }
    else{
        // In the array, remove it
        book_ids.splice(index, 1);
    }

    list_container.text(book_ids.join(','));
});

デモ: http://jsfiddle.net/rYu6m/4/

于 2013-04-04T20:46:17.120 に答える