jquery click (function) onload

Question

Мне нужна помощь для консолидации/сокращения кода ниже. Первоначально у меня было выпадающее меню, которое контролирует видимость div на основе ценности. Он работает onClick, но поскольку это страница базы данных, она не работает onLoad, поэтому мне пришлось добавить вторую логику. Любые предложения/ввод приветствуются.

$(document).ready(function() { 
    var $caseStatus = $(this).find("#auth_status").val(); 
    //alert ($caseStatus); 
    if ($caseStatus === "1") { 
    $(".pendingClass").show(); 
    $(".authClass").hide(); 
    } 
    else if ($caseStatus === "2") { 
    $(".pendingClass").hide(); 
    $(".authClass").show(); 
    } 
    else { 
    $(".pendingClass").hide(); 
    $(".authClass").hide(); 
    } 

    // Show/Hide Divs for Authorization Status 
    $("#auth_status").click(function() { 
    if ($(this).val() === "0") { 
     $(".pendingClass").hide(); 
     $(".authClass").hide(); 
    } 
    else if ($(this).val() === "1") { 
     $(".pendingClass").show(); 
     $(".authClass").hide(); 
    } 
    else if ($(this).val() === "2") { 
     $(".pendingClass").hide(); 
     $(".authClass").show(); 
    } 
    }); 
}); 

Answer 1

Вы можете уменьшить свой код немного упростив свой if/else структуры (поскольку ничего, кроме "1" такого же шоу/результат шкура, а также просто вызвать обработчик вы связываете при первой загрузке страницы, как это:

$(function() { 
    $("#auth_status").click(function() { 
    var val = $(this).val(); 
    $(".pendingClass").toggle(val === "1"); 
    $(".authClass").toggle(val === "2"); 
    }).click(); 
}); 

Answer 2

$(function() { 
    function toggleElements() { 
    var caseStatus = $("#auth_status").val(); 
    $(".pendingClass").toggle(caseStatus === "1"); 
    $(".authClass").toggle(caseStatus === "2"); 
    }; 

    toggleElements();       // initial call (on page load) 
    $("#auth_status").click(toggleElements); // manual call (on user click) 
}); 

Answer 3

Можно определить несколько объектов:

var authCtrl = { 
    '0': { show: null, hide: '.pendingClass, .authClass' }, 
    '1': { show: '.pendingClass', hide: '.authClass' }, 
    '2': { show: '.authClass', hide: '.pendingClass' } 
}; 

и аналогичным образом (в обратном направлении) для другого корпуса. Затем обработчик просто захватывает запись на основе этого значения поля и скрывает/показывает по указанию.