Question

我对jquery有点新鲜，我在下面写了一个toggle类型的jquery文章。只是想知道什么是更好的方式来写这个，所以它是可重用的。

它的工作原理如下。基本上单击其中一个无线电量选项（它们具有“nOther”类），然后禁用另一个“数量”文本框。但是点击其他数量的电台并启用文本框。

$("input[type='radio'][name='giftType'][value='Other']").click(function(){
        $("input[type='text'][name='otherAmount']").removeAttr('disabled');
});
$("input[type='radio'][name='giftType'][class='nOther']").click(function(){
        $("input[type='text'][name='otherAmount']").attr('disabled', 'disabled');
});

显然有一种更好的方式来写这个，所以我可以重复使用它

类似函数（'value'，'class'）{ ... }

非常感谢任何帮助。

Answer 1

使用简单的选择器尝试此操作。

$("input[name='giftType']").click(function(){
    $("input[name='otherAmount']").prop('disabled', ($(this).val() != 'Other'));
});

注意：我使用prop方法启用/禁用文本框，这是设置元素属性的推荐方法。

Answer 2

怎么样：

$('input[name="giftType"]').click(function(){
  $('input[name="otherAmount"]').attr('disabled',($(this).val() != 'Other'))
});

这将检查名为“giftType”的单选按钮组，如果选择了值为“Other”的单选按钮，则禁用名为“otherAmount”的文本框，否则不会禁用。这是一个快速 jsFiddle 来测试。

更新了向后条件检查（== to！=）

Answer 3

首先要指出几点：

jQuery属性选择器是最慢的，所以尽可能尝试使用标记名，类和ID。
Enabled不是有效属性，因为默认情况下启用任何非禁用元素。如果您想在以后的代码中检查启用状态，可以执行$（“输入：不（[禁用]）”）
如果你也可以指定一个包含元素，你可以使下面的效率更高，所以你要以$（“＃myContainerId”）开头.find（“input [type ='radio']”）
在函数中包装它不一定是更好的编写方式。根据您网站上代码的复杂程度，有多种方法可以组织代码以保持代码整洁。但一般来说，如果每页调用任何一行代码，它应该在一个函数中。
但是我把你的代码包装在一个jquery匿名函数包装器中，它延迟了代码的运行，直到DOM加载完毕（并且具有额外的好处（由于包含在函数范围内的所有内容）不添加任何全局变量到DOM

˚F

$(function() {
   var otherAmountInputs = $("input[type='text'][name='otherAmount']"); //cache this expensive query
  $("input[type='radio']")
   .filter("[name='giftType'][value='Other']").click(function(){
        otherAmountInputs.removeAttr('disabled');
   })
   .end()
   .filter(".nOther[name='giftType']").click(function(){
        otherAmountInputs.attr('disabled', 'disabled');
   });
});

如何将其写为函数

3 个答案: