3

DIVをクリックするとdiv要素があり、このDIVの「選択された」クラスを追加します。「選択された」クラスの DIV は .each() に移動します。この要素を最後に追加された順に並べ替えることはできますか?

たとえば、341 を選択した場合、341 を取得したい場合、これが私のコードです

<!DOCTYPE html>
<html>
    <head>
        <style>.active{display: inline;margin:0 10px;border:1px solid #000;cursor: pointer;}</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="content"> 
            <div class="row">
                <div class="nred"></div><div class="active">1</div><div class="active">2</div><div class="active">3</div><div class="active">4</div><div class="active">5</div><div  class="active">6</div><div class="active">7</div><div class="active">8</div>
            </div>
            <div id="bileti"></div>
        </div>
<script>
    $(".row").hover(
        function () {
            $(this).children("div.active").toggleClass('bounce');
            $(this).children("div.nred").toggleClass('izbranred');
        }
    );

    $("div.active").click(function () {
        $(this).toggleClass('selected');
        document.getElementById("bileti").innerHTML="";

        $(".selected").each(function(){
            var place=$(this).html();
            document.getElementById("bileti").innerHTML+=place;
        });
    });
</script>

    </body>
</html>
4

2 に答える 2

2

を使用する代わりに$(".selected").each（DOMの順序で要素を提供するたびにクラスごとに再選択されます）、配列内の選択されたdivを追跡します。

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        document.getElementById("bileti").innerHTML = "";

        // Iterate through the array

        $(selected).each(function(){
             var place = $(this).html();
             document.getElementById("bileti").innerHTML += place;
        });
    });

})();

以下も最適化できることに注意してください。

$(selected).each(function(){
     var place = $(this).html();
     document.getElementById("bileti").innerHTML += place;
});

ループする要素がたくさんある場合、そのコードは、innerHTMLに追加することによってDOMを更新し続けるため、非常に遅くなります。HTML文字列を作成し、ループの後にDOMに配置する方がはるかに高速です。

var places = "";
$(selected).each(function(){
     places += $(this).html();
});
document.getElementById("bileti").innerHTML = places;

次に、次の行を削除することもできます。

document.getElementById("bileti").innerHTML = "";

これらすべての変更を行うと、スクリプト全体が次のようになります。

$(".row").hover(
    function(){
        $(this).children("div.active").toggleClass('bounce');
        $(this).children("div.nred").toggleClass('izbranred');
    }
);

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        var places = "";
        $(selected).each(function(){
             places += $(this).html();
        });
        document.getElementById("bileti").innerHTML = places;

    });

})();

JSFiddleデモ

于 2012-10-05T22:28:17.527 に答える
2

これを試して：

var place = '';
$(".selected").each(function(){
    place += this.innerHTML;
});
document.getElementById("bileti").innerHTML = place;

selectedただし、各メソッドは DOM 内の位置に従って要素を選択するため、結果は常に 134 のように並べ替えられます。クラス がない場合は、スパン要素を追加して削除できます。

$("div.active").click(function() {
    $(this).toggleClass('selected');
    if ($(this).hasClass('selected')) {
        $("#bileti").append('<span>' + this.innerHTML + '</span>');
    } else {
        $("#bileti span:contains(" + this.innerHTML + ")").remove();
    }
});​

http://jsfiddle.net/MW2wH/

于 2012-10-05T22:22:59.720 に答える