有一個更好的方法來隱藏和顯示帶有收音機檢查的 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 元素並緩存 rest 來改進 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 性能

特別是閱讀文件的第三段

緩存 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');

相反，首先將 object 保存到局部變量，然后繼續操作：

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);
    });

如果您多次需要一個選擇器然后緩存它我認為它被稱為 object 緩存正如 Claudio 已經提到的那樣，這就是為什么您會看到很多：

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

保存 jquery function （jquery 對象）結果的變量的約定是它們以 $ 開頭，但由於它只是一個變量名稱，您可以隨意調用它，以下也可以：

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