0

在我的一个网页上，我需要一个单词列表，单击时每个单词都应该有一个边框。单击另一个单词时，前一个单词会失去边框，而新单词会得到一个。我还需要为单击的单词显示一个带有一些选项的 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

事实证明，罪魁祸首是 CSS 中 .invis 和 .bordered 的“float:left”。没有它，它开始工作得更快。

于 2012-08-05T08:10:34.457 回答
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 回答