Как написать это как функцию

Question

Я вроде как новый для jquery, и у меня есть кусок jQuery типа toggle, написанный ниже. Просто интересно, что было бы лучшим способом написать это, чтобы он был повторно использован.

Работает так. В основном щелкните по одному из параметров количества радиостанций (у них есть класс «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'); 
}); 

Очевидно, что это лучший способ, чтобы написать это, так что я могу использовать его

Что-то вроде функции ('значение', 'класс') { ... }

Любая помощь очень ценится.

Answer 1

Как насчет:

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

Это проверяет группу радио, но тонны с именем «giftType», и если выбрано значение со значением «Другое», текстовое поле с именем «otherAmount» отключено, иначе оно не будет отключено. Ниже приведено краткое описание jsFiddle.

Обновлен обратное условие проверка (== к! =)

Answer 2

Попробуйте это с помощью простого селектора.

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

Примечание: Я использую prop метод, чтобы включить/отключить текстовое поле, которое является рекомендуемым способом установки свойств элементов.

Answer 3

несколько общих указателей первых:

1. JQuery селекторы атрибутов являются одними из самых медленных, поэтому старайтесь использовать тэг, класс и идентификаторами, где это возможно.
2. Включено не является допустимым атрибутом, так как по умолчанию отключен любой отключенный элемент. Если вы хотите проверить включенность позже в своем коде, вы можете сделать $ ("input: not ([disabled])")
3. Вы можете сделать ниже более эффективным, если вы также можете указать содержащий элемент, чтобы вы 'd начинать с $ ("# myContainerId"). find ("input [type =' radio ']")
4. Обертка его в функции не обязательно является лучшим способом ее написания. В зависимости от того, насколько сложным является код на вашем сайте, существует множество способов организации вашего кода, чтобы он был незагроможденным. Но в целом, если какой-либо бит кода вызывается более одного раза на страницу, он должен быть в функции.
5. Я, однако, обернул свой код в анонимной оболочке jQuery, которая задерживает код, выполняемый до тех пор, пока DOM не загрузится (и имеет дополнительное преимущество (из-за того, что все обернуто в области функции) не добавляет глобальных переменных к DOM

е

$(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'); 
    }); 
});