Question

我是jQuery初学者，目前我正在做一些运动，在我学到的每件事情上 - 我开始做jQuery课程大约几天。

这是我正在处理的jsfiddle http://jsfiddle.net/nPcZJ/示例，

我想知道是否有更好的方法可以达到相同的效果？

然而，我的一位朋友告诉我，如果我们在特定页面上显示了1000个问题，我们希望根据点击的问题显示/隐藏答案。

他说会导致页面加载不足......？
它似乎与几个问题完美配合。但他说了1000个问题怎么样？ 如果我有1000个问题会导致页面无法加载，那么这是真的吗？

$(document).ready(function(){
    $("dt").click(function(){
        var qst = $(this).parent().find('dd');
        $(qst).slideToggle();
    })
})

<dl>
     <dt>Q-1 What is your favorite scripting language ?</dt>
     <dd style="display: none">Ans - PHP, C++ </dd>      
</dl>

<dl>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>  
<dl>
    <dt>Q-3 Where are you from ?</dt>
     <dd style="display: none">Ans - I am from Russia</dd>  
</dl>

<dl>
    <dt>Q-4 Can you build small scripts - complex scripts ?</dt>
    <dd style="display: none">Ans - Yes, i can build small - complex scripts and from scratch</dd>
</dl>

Answer 1

您可以通过直接访问dd

中的兄弟event.target.nextElementSibling来阻止jQuery在大型DOM中遍历/搜索其父级和子级

$("dt").click(function(e){
    var qst=e.target.nextElementSibling; // which is same as $(this).next();
    //var qst = $(this).parent().find('dd');
    $(qst).slideToggle();
});

有趣的是，所以它也可能有更短的标记，如

<dl>
    <dt>Q-1 What is your favorite scripting language ?</dt>
    <dd style="display: none">Ans - PHP, C++ </dd>
    <dt>Q-2 What is your favorite IDE software ?</dt>
    <dd style="display: none">Ans - Aptana Studio 3, Dreamweaver</dd></dl>     
</dl>

这种方法会导致加载滞后吗？

1 个答案: