.que tous les attributs

Question

Ok, j'ai essayé comme 5 révisions différentes et je suis sûr que mon code ne fait qu'empirer et je me suis dit que je devrais arrêter et demander de l'aide.

Voici ce que je suis en train de faire:

dans le code HTML, permet de dire que je crée ce bouton:

<button border="#ff0000" bg="#0000ff" color="#fff" pad="10px">Click Me</button> 

Comme vous pouvez le voir, je compose plusieurs attributs et leur a donné chacun un valeur.

Je voudrais utiliser jquery pour sélectionner chaque bouton, et pour chaque bouton, parcourir chaque attribut et prendre la valeur et ajouter un attribut réel avec cette valeur. Par exemple, il verrait border = "# ff0000" et créerait un attribut border-color: # ff0000: CSS et le lierait à ce bouton. Il verrait l'attribut bg = "# 0000ff" et attacherait la couleur de fond: # 0000ff: à ce bouton.

Voici mes déchets:

$(document).ready(function() { 
    $("button").each(function() { // selects all buttons 
     $(this.attr).each(function() { // selects all attributes within each button 
      var attribute = this.parent().attr(); // sets a variable that is equal to the value of the selected made up attribute 
      if ($(this).parent().attr("border")) { // if there is an attribute called border, do this 
       $(this).parent().css("border-color", attribute) // give this attribute's parent (the button) this css attribute 
      } else if ($(this).attr("bg")) { // rinse and repeat for each attribute I made up 
       $(this).parent().css("background-color", attribute) 
      } else if ($(this).attr("color")) { 
       $(this).parent().css("color", attribute) 
      } 
     }); 
    }); 
}); 

S'il vous plaît laissez-moi savoir si je ne fais pas de sens =]

MISE À JOUR

Les œuvres de code suivant, mais je ne peux pas aider à sentir qu'il y a un moyen plus facile/plus court de coder ceci, puisque comme vous pouvez le voir, je répète le même code beaucoup.

$(document).ready(function() { 

    $("button").each(function() { 
     var bg = $(this).attr("bg"); 
     var border = $(this).attr("border"); 
     var color = $(this).attr("color"); 
     var radius = $(this).attr("radius"); 
     var pad = $(this).attr("pad"); 

     if($(this).attr("bg")) { 
      $(this).css("background", bg) 
     } 

     if($(this).attr("border")) { 
      $(this).css("border-color", border) 
     } 

     if($(this).attr("color")) { 
      $(this).css("color", color) 
     } 

     if($(this).attr("radius")) { 
      $(this).css("border-radius", radius) 
     } 

     if($(this).attr("pad")) { 
      $(this).css("padding", pad) 
     } 
    }); 

}); 

Answer 1

Bon de voir que vous avez trouvé une solution de travail. En ce qui concerne l'optimisation de votre réponse, il y a quelques approches que vous pourriez prendre. J'en ai partagé un ci-dessous, que vous pourriez trouver utile, avec quelques commentaires résumant ce qui se passe.

$(document).ready(function() { 
 
    $("button").each(function() { 
 
     // Cache jQuery selectors for each button in an object literal 
 
     var selectors = { 
 
      'background' : $(this).attr("bg"), 
 
      'border-color' : $(this).attr("border"), 
 
      'color'   : $(this).attr("color"), 
 
      'border-radius' : $(this).attr("radius"), 
 
      'padding'  : $(this).attr("pad") 
 
     }; 
 

 
     // Iterate over object 
 
     for (var property in selectors) { 
 
      if (selectors.hasOwnProperty(property)) { 
 
       // If the current key has a property set 
 
       if(selectors[property]) { 
 
        // Set CSS property of button using the object key and cached jQuery property 
 
        $(this).css(property, selectors[property]); 
 
       } 
 
      } 
 
     } 
 
    }); 
 
});

<button border="#ff0000" bg="#0000ff" color="#fff" pad="10px">Click Me</button> 
 
<button border="#ff0000" bg="#0000ff" color="#b3d9ff" pad="15px">Click Me</button> 
 
<button border="#ff0000" bg="#0000ff" color="#ffd480" pad="20px">Click Me</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>