简化 jQuery 代码 - slide 和 slideToggle答案

【问题标题】：Simplify jQuery code - slide and slideToggle简化 jQuery 代码 - slide 和 slideToggle
【发布时间】：2017-06-04 13:49:45
【问题描述】：

如何简化当前的 JavaScript 代码？看起来太复杂了。

// Data from AJAX response
var errorsJSON = {
    "name-pl": ["The name-pl field is required."],
    "name-en": ["The name-en field is required."]
}

var errorString = $(this).data('validate-multiple');
var errorNamesArray = errorString.split(", ");
var ul = $('<ul class="list-unstyled">');

$.each(errorNamesArray, function(key, value) {
    if (errorsJSON.hasOwnProperty(value)) {
        ul.append(`<li><span class="help-block">${errorsJSON[value]}</span></li>`);
    }
});

if (! $(this).is(':visible') && ul.children('li').length > 0) {
    $(this).find('div.controls').empty().append(ul);
    $(this).slideDown(500);
} else if ($(this).is(':visible') && ul.children('li').length === 0) {
    $(this).slideUp(500);
} else if ($(this).is(':visible') && ul.children('li').length > 0) {
    $(this).slideUp(500, function() {
        $(this).find('div.controls').empty().append(ul);
        $(this).slideDown(500);
    });
}

这里我粘贴了html和js代码http://jsfiddle.net/ecLjnnhm/ 我想指出errorsJSON 可以更改，并且取决于用户在输入字段中输入的内容。

【问题讨论】：

一个更好的主意：不要只是粘贴您的代码并说“让它变得更好”，为什么不直接告诉我们您的最终目标是什么？不知道您要做什么，很难让您的代码变得更好。
我的目标是简化切换逻辑。它非常嵌套。我尝试在开头使用slideUp()，然后在结尾使用slideDown()，但是这些功能已经被动画div没有错误。

标签： javascript jquery slide slidetoggle

【解决方案1】：

可读性：使用变量来存储if 语句的条件，而不是每次都进行冗长的声明。

效率：将 $(this) 缓存为变量，因此 jQuery 只需执行一次。

个人偏好：我建议在任何 jQuery 对象变量（如您的情况下为 ul）前加上 $ 以表明它们是 jQuery 对象。

// Data from AJAX response
var errorsJSON = {
    "name-pl": ["The name-pl field is required."],
    "name-en": ["The name-en field is required."]
}

var errorString = $(this).data('validate-multiple');
var errorNamesArray = errorString.split(", ");
var $ul = $('<ul class="list-unstyled">');
var $t = $(this);
var isVisible = $t.is(':visible');
var hasErrors = false;

$.each(errorNamesArray, function(key, value) {
    if (errorsJSON.hasOwnProperty(value)) {
        $ul.append(`<li><span class="help-block">${errorsJSON[value]}</span></li>`);
        hasErrors = true;
    }
});

if (!isVisible && hasErrors) {
    $t.find('div.controls').empty().append(ul);
    $t.slideDown(500);
} else if (isVisible && !hasErrors) {
    $t.slideUp(500);
} else if (isVisible && hasErrors) {
    $t.slideUp(500, function() {
        $t.find('div.controls').empty().append(ul);
        $t.slideDown(500);
    });
}

【讨论】：