javascript - 关于在 Javascript 和 jQuery 中隐藏 div 的标准方法的问题

Question

我对 javascript 和 jQuery 还是比较陌生，只是想知道这一点。

假设我有这个 HTML 片段:

<p id="disclaimer">
Disclaimer! </p>
<input type="button" id="hideButton" value="hide" />

我可以通过以下方式隐藏 div:

$(document).ready(function() {
    $('#hideButton').click(function() {
        if ($('#disclaimer').css('display') == 'none') {
            $('#disclaimer').show();
            $('#hideButton').val('hide');
        } else {
            $('#disclaimer').hide();
            $('#hideButton').val('unhide');         
        }
    })
});

或

$(document).ready(function() {
$('#hideButton').click(function() {
    if ($('#disclaimer').is(':visible')) {
        $('#disclaimer').hide();
        $('#hideButton').val('unhide'); 
    } else {
        $('#disclaimer').show();
        $('#hideButton').val('hide');
    }
    })
});

我的问题是:是否有隐藏 div 的首选方法，还是只是个人喜好问题？

Answer 1

我会这样写

$(function() {
    $('#hideButton').click(function() {
        $('#disclaimer').toggle();
        $(this).val(
            $('#disclaimer').is(":visible") ? 
                'hide' : 'unhide'
        );
    })
})

甚至

$(function() {
    $('#hideButton').click(function() {
        $(this).val(
            $('#disclaimer').toggle().is(":visible") ? 
                'hide' : 'unhide'
        )
    })
})

作为对评论的回应，这里有几点我认为这段代码更好的原因

• $(...) 看起来比 document.ready 好
• 没有参数的 toggle() 比“如果可见则隐藏，否则显示”更好 - 不要问，告诉。
• 在事件处理程序中始终使用 $(this) 来引用对象本身
• 在不影响可读性的情况下使用链接