0

私のWebページの1つに、単語のリストが必要です。各単語をクリックすると、その周りに境界線が表示されます。別の単語がクリックされると、前の単語が境界線を失い、新しい単語が境界線を取得します。また、クリックされた単語のいくつかのオプションを含むdivを表示する必要があります。

目標を達成するために、jQueryを使用しました。考え方は単純です。前の要素から境界線のないクラスを削除し、新しい要素に境界線のあるクラスを追加します。ただし、そのような単語の数が数百になると、これは非常に遅くなります。どうすればそれを改善できますか？ちなみに、レンダリングも遅いです。

これが私が使用するコードです（CSSなしで）

HTML 

...



<div class="wrapper">
    <div class='invis'>
        <span word="24">YOu are a cool programmer</span>
    </div>
</div>




...

JQuery Javascript：

var currentElement = null;
$('.invis').click(function() {
    if (currentElement != null) {
        currentElement.removeClass("bordered");
        currentElement.addClass("invis");
    }
    $(this).removeClass("invis");
    $(this).addClass("bordered");
    currentElement = $(this);
});

4

2 に答える 2

0

ライブラリを使用せずに、次のような昔ながらの方法で試してみてください。

var invis = document.getElementsByClassName('invis'), last=false;

for (var i=0; i<invis.length; i++) {
    invis[i].addEventListener("click", function(e) {
        if (last) last.className = 'invis';
        this.className = 'bordered';
        last=this;
    });
}

</ p>

フィドル

于 2012-08-04T17:52:08.337 に答える
0

結局のところ、犯人は.invisの「float：left」であり、CSSでは.borderedでした。それがなければ、それはかなり速く働き始めました。

于 2012-08-05T08:10:34.457 に答える