javascript - jQuery 将 document.ready 和 ajaxComplete 方法组合在一起以获得相同的代码

Question

想要在页面加载和 ajax 完成时应用相同的代码。下面是代码

$(document).ajaxComplete(function() {
    showHideBlock();
});

$(document).ready(function() {
    showHideBlock();
});

function showHideBlock() {
    if ($('.reservationDetails').length == 1) {
        $('.user-reservation-info').show();
    } else {
        $('.user-reservation-info').hide();
    }
}

还有其他更好的方法吗？

Answer 1

您可以使用method chaining并缩短附加 ready 和 ajaxComplete 处理程序的代码。您可以通过将其存储在变量中来避免输入两次 $('.user-reservation-info') 。另外，由于您的 if..else 代码非常简单，因此您可以使用 ternary operator .

$(document).ready(showHideBlock).ajaxComplete(showHideBlock);

function showHideBlock() {
    var userInfo = $('.user-reservation-info');
    $('.reservationDetails').length === 1 ? userInfo.show() : userInfo.hide();
}

您还可以将上述代码中的 $('.reservationDetails').length === 1 替换为 $('.reservationDetails').length，如果您只是为了检查 .reservationDetails 是否与 DOM 中的任何元素匹配。但是，如果您特别需要 length 为 1，则无法完成此操作。