3

No JQuery, temos uma função chamada toggle que nos permite alternar entre o elemento ficar visível ou não. E a função toggleClass, que permite alternar entre a inclusão de uma classe ou não.

$(function () {
  
  $('button').click(function () { 
    
     $('div').toggle();
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div style="display:none">Estou aqui</div>

<button>Click</button>

Porém eu tenho a necessidade de "colocar e tirar" um atributo da mesma maneira que essa função faz. Quero fazer isso com o atributo required num input.

Tem como fazer isso no jQuery?

2 Respostas 2

2

Pode criar algo com jQuery.fn, assim:

jQuery.fn.extend({
  toggleAttribute: function(attr, value) {
    if (typeof value !== "string") {
        value = "true";
    }

    //Pega os elementos que tem o atributo
    var withAttr = this.filter("[" + attr + "]");

    //Pega os elementos sem o atributo
    var noAttr = this.filter(":not([" + attr + "])");

    //Se for classes então não usamos attr, porque classes funcionam diferente
    if (attr === "class") {
        noAttr.addClass(value);
        withAttr.removeClass(value);
    } else {
        noAttr.attr(attr, value);
        withAttr.removeAttr(attr);
    }

    return this;
  }
});

O uso fica assim para automaticamente adicionar required ou remover:

$('button').click(function () { 
    $('input').toggleAttribute("required");
});

O uso fica assim para automaticamente adicionar o atributo foo com o valor baz ou remover:

$('button').click(function () {
    $('div').toggleAttribute("foo", "baz");
});
4
  • 1
    Pènsei nisso mesmo, chefe, mas de maneira que iria funcionar para qualquer atributo. De qualquer forma +1 ;) Commented 18/02/2016 às 18:59
  • @WallacedeSouza já corrigi... pois é né ... pra eu ganhar upvotes os caras veem de carroça (isso quando ganho, porque virou raridade), pra eu ganhar downvote os caras veem de foguete...
    – Syzoth
    Commented 18/02/2016 às 19:05
  • Tiraram e colocaram o voto (tira e põe várias vezes). Acho que alguém está brincando por conta da pergunta ser justamente sobre toggle. rsrsrsrsrs Commented 18/02/2016 às 19:08
  • 1
    @WallacedeSouza era uma extensão jQuery chamada toggleHater.js, funciona assim $("@guilhermenascimento").toggleHater();
    – Syzoth
    Commented 18/02/2016 às 19:11
2

Igual ao toggle não tem, mas tem o .attr() que adiciona um atributo e o .removeAttr() que remove.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .