有更好的方法來隱藏和顯示無線電檢查div？

Question

我在幾天內創建了這段代碼，但我相信可以改進它，有人可以幫助我創建更智能的方法？

// Hide registered or customized field if not checked. 
function checkUserType(value) { 
    if (value == 2) { 
    $('#registered').hide(); 
    $('#customized').show(); 
    } else if (value == 1) { 
    $('#registered').show(); 
    $('#customized').hide(); 
    } 
} 

checkUserType($('input:radio[name="jform[place_type]"]:checked').val()); 

$('#jform_place_type').on('click', function() { 
    checkUserType($('input:radio[name="jform[place_type]"]:checked').val()); 
}); 

演示：http://jsbin.com/emisat/3

Answer 1

// Hide registered or customized field if not checked. 
function checkUserType(value) { 

} 

var t = function() { 
    var value = $('input:radio[name="jform[place_type]"]:checked').val(); 
    if (value == 2) { 
    $('#registered').hide(); 
    $('#customized').show(); 
    } else if (value == 1) { 
    $('#registered').show(); 
    $('#customized').hide(); 
    } 
}; 

$('#jform_place_type').on('click', t); 

Answer 2

可以改善存儲的DOM元素的jQuery的（對於性能）和緩存休息。這是你猜到的最大的東西。

function checkUserType(value) { 
    var r = $("#registered"); 
    var c = $("#customized"); 
    if (value == 2) { 
    r.hide(); 
    c.show(); 
    } else if (value == 1) { 
    r.show(); 
    c.hide(); 
    } 
} 

var func = function() { 
    checkUserType($('input:radio[name="jform[place_type]"]:checked').val()); 
}; 

$('#jform_place_type').on('click', func); 

對於任何進一步的閱讀檢查這個JQuery Performance

尤其是閱讀文檔

緩存的jQuery對象

獲取保存的jQuery對象變量的習慣第三段（很像我們上面的例子）。例如，從來沒有（eeeehhhhver）做到這一點：

$('#traffic_light input.on').bind('click', function(){...}); 
$('#traffic_light input.on').css('border', '3px dashed yellow'); 
$('#traffic_light input.on').css('background-color', 'orange'); 
$('#traffic_light input.on').fadeIn('slow'); 

相反，第一對象保存到一個局部變量，並繼續您的操作：

var $active_light = $('#traffic_light input.on'); 
$active_light.bind('click', function(){...}); 
$active_light.css('border', '3px dashed yellow'); 
$active_light.css('background-color', 'orange'); 
$active_light.fadeIn('slow'); 

提示：由於我們要記住，我們的地方變量是一個jQuery包裝集合，我們使用$作爲前綴。請記住，不要在應用程序中多次重複執行jQuery選擇操作。

Answer 3

http://api.jquery.com/toggle/

$('#jform_place_type').on('click', function() { 
//show is true if the val() of your jquery selector equals 1 
// false if it's not 
     var show= ($('input:radio[name="jform[place_type]"]:checked') 
     .val()==1); 
//set both divs to visible invisible/show !show(=not show) 
// (not show) means that if show=true then !show would be false 
     $('#registered').toggle(show); 
     $('#customized').toggle(!show); 
    }); 

如果您需要選擇一次以上，然後緩存它，我覺得這就是所謂的對象高速緩存克勞迪奧媒體鏈接所提到的，這就是爲什麼你看到很多的：

$this=$(this); 
$myDivs=$("some selector"); 

的約定爲jQuery的函數（jquery對象）的結果變量是，他們以$開頭，但因爲它只是一個變量名稱，你可以稱之爲任何你喜歡的，下面的工作也是如此：

me=$(this); 
myDivs=$("some selector");