0

我创建了这段代码几天，但我相信可以改进它，有人可以帮助我创建一个更聪明的方法吗？

// 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

4

3 回答 3

0

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

如果您多次需要选择器然后缓存它，我认为它被称为对象缓存，正如 Claudio 已经提到的，这就是为什么您会看到很多：

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

保存 jquery 函数（jquery 对象）结果的变量的约定是它们以 $ 开头，但由于它只是一个变量名，您可以随意调用它，以下内容也可以：

me=$(this);
myDivs=$("some selector");
于 2013-02-02T15:12:20.967 回答
0 
// 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);
于 2013-02-02T14:54:33.560 回答
0

您可以通过存储 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 性能

特别是阅读文件的第三段

缓存 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 选择操作。

于 2013-02-02T14:55:48.860 回答