简化 jQuery If 语句答案

【问题标题】：Simplifying jQuery If-Statement简化 jQuery If 语句
【发布时间】：2018-12-07 17:03:24
【问题描述】：

我有这个 jQuery if 语句工作。有没有更简单/优雅或更不重复的写法？

“如果 foo 可见，则将此 HTML 元素添加到 #message，否则将此其他 HTML 元素添加到 #message。”

$(document).ready(function() {
    var $foo= $('#something');
    if ($foo.is(':visible')) {
        $('#message').html('<strong>Yes</strong>, message one.');
    }
    else {
        $('#message').html('<strong>No</strong>, message two.');
    }
});

【问题讨论】：

您可以使用三元运算符，但不会更短。另外，它的可读性会降低。如果你可以编辑 HTML，你可以在那里设置 #message 的内容，然后去掉 else。

标签： jquery if-statement simplification

【解决方案1】：

它已经是一个很小的代码块，我认为没有太多的简化可能，但在这里您可以在前面的行中定义 $('#message') 元素并在多个地方使用它

$(document).ready(function() {
    var $foo= $('#something');
    var $messageBlock = $('#message');

    var $toShow = ($foo.is(':visible'))? '<strong>Yes</strong>, message one.' : '<strong>No</strong>, message two.';
    $messageBlock.html($toShow);

});

【讨论】：

我喜欢这个。谢谢！

【解决方案2】：

您可以为消息的可变部分设置一些变量，然后将它们代入。

$(document).ready(function() {
    var $foo= $('#something'), yesno, msgnum;
    if ($foo.is(':visible')) {
        yesno = 'Yes';
        msgnum = 'one';
    }
    else {
        yesno = 'No';
        msgnum = 'two';
    }
    $('#message').html(`<strong>${yesno}</strong>, message ${msgnum}.`);
});

这使得并行性更加清晰。

【讨论】：