jQuery – um pequeno seletor e refatoração de código

Esta pequena dica deve dar uma impressão de como refatorar um pequeno trecho do código jQuery.

Imaginando o seguinte cenário. Você deseja clicar em um botão em uma página da web e o clique deve desativar todos os outros botões de clique na página. Ok, fácil de lidar. Mas tenha em mente que existem alguns outros elementos de botão, como input [type = button] , input [type = reset] , input [type = submit] , button .

Vamos começar com o código:

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    var $buttons = $("input[type=button],input[type=reset],input[type=submit],button").not(this);
    $buttons.attr("disabled",true);
});

O código está ok e funciona como deveria. Mas podemos fazer melhor do que usar um seletor como este …

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    var $buttons = $(":submit,:reset,:button").not(this);
    $buttons.attr("disabled",true);
});

A pequena mudança no seletor para os elementos do botão de clique torna o código mais curto e mais elegante. Mas ainda podemos fazer melhor … Vamos encadear a ação de desabilitar ao seletor

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    $(":submit,:reset,:button").not(this).attr("disabled",true);
});

É um exemplo simples, mas demonstra como seu código jQuery pode evoluir na direção certa durante o desenvolvimento.

HTH.