Question

如何优化此示例代码段：

请注意，它有多个调用来查找#data和#click标签。


$(function(){
    $('#data').hide();
    $('#click').click(function() {
      $('#data').toggle('', function() {
      });
    $('#click').hide();
    });
})

Answer 1

两行代码。

<style type="text/css">
 #data{display:none;}
</style>

<script>
$(function(){
    $('#click').click(function(){
       $('#data,#click').toggle();
    });
});
</script>

<div id="data">Some data</div>

<button id="click">Click me</button>

Answer 2

不确定

$(function(){
    var data = $('#data');
    var click = $('#click');

    click.click(function() {
        data.toggle();
        $(this).hide();
    });
});

如果您打算稍后使用它们，请将选择器缓存在变量中。不要将jQuery用于CSS可以完成的任务。因此，不要将data与data.hide()隐藏在display:none的CSS中。

请参阅此问题：jQuery Standards and Best Practice

Answer 3

是的，没有必要重复$（“＃data”）和$（“＃click”） - 将它们分配给变量然后重复使用它们。在您当前的代码中，必须两次找到项目。

优化jQuery代码

3 个答案: