Usa la funzione attr() all'interno di un nuovo plugin?

Question

voglio sapere se è possibile utilizzare la funzione attr() all'interno di un nuovo plugin:

(function ($) { 
    $.fn.resetColor = function() { 
     var oldColor=this.attr("memColor"); 
     this.css('background-color',oldColor); 
    }; 
})(jQuery); 

ho provato il codice di cui sopra, ma non funziona. Sono sicuro che l'attributo memColor esiste perché l'ho provato con un avviso nel blocco $(document).ready.

Answer 1

Il plugin jQuery authoring guidelines consiglia questo metodo:

(function ($) { 
    $.fn.resetColor = function() { 
     return this.each(function() { 
      var elem = $(this); 

      var oldColor = elem.attr("memColor"); 
      elem.css('background-color',oldColor); 
     }; 
    }); 
}(jQuery)); 

1. Assumere il plugin viene chiamato su un insieme di elementi.
2. Ottieni l'elemento jQuery con cui lavorare.

essere consapevoli che esiste una differenza tra proprietà (prop()) e attributi (attr()), il primo si riferisce alle proprietà di JavaScript DOM HTMLElements, mentre la successiva si riferisce ad attributi HTML secondo quanto specificato anche nel markup. JQuery rende questa distinzione anche a partire dalla versione 1.6:

La differenza tra attributi e proprietà può essere importante nelle situazioni specifiche . Prima di jQuery 1.6, il metodo .attr() a volte prendeva in considerazione i valori delle proprietà durante il recupero di alcuni attributi, che potrebbero causare un comportamento incoerente. A partire da jQuery 1.6, il metodo .prop() fornisce un modo per recuperare esplicitamente i valori delle proprietà, mentre .attr() richiama gli attributi.

---

Demo:

(function ($) { 
 
     $.fn.resetColor = function() { 
 
      return this.each(function() { 
 
       var elem = $(this); 
 

 
       var oldColor = elem.attr("memColor"); 
 
       elem.css('background-color',oldColor); 
 
      }); 
 
     }; 
 
    $('.me').resetColor(); 
 
    }(jQuery)); 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="me" memColor="Red">Lorem ipsum.</div> 
 
<div class="me" memColor="Blue">Lorem ipsum.</div>