Tous les boutons ont la même largeur - jQuery

Im la programmation d'une calculatrice et Im essayant que tous les boutons dans la même colonne ont la même largeur. Pour cela Im Im utilisant jQuery (Je le fais de cette façon parce que j'ai un examen dans quelques jours et je veux pratiquer).Tous les boutons ont la même largeur - jQuery

Mon code HTML:

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>CORE2017 P3</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="calculadora.js"></script> 
    <link href="calculadora.css" rel="stylesheet" type="text/css" media="all"> 
    </head> 
    <body onload="igualarBotones()"> 
    <header> 
     <p>Calculator</p> 
    </header> 
    <section id="main"> 
     <p> 
     Número: <input type="text" id="pantalla"> <button id="Limpiar">Limpiar</button> 
     </p> 

     <p> 
     <button id="suma" class="columna1">+</button> 
     <button id="resta" class="columna2">-</button> 
     <button id="cuadrado" class="columna3">x<sup>2</sup></button> 
     </p> 
     <p> 
     <button id="inverso" class="columna1">1/x</button> 
     <button id="raiz" class="columna2">sqrt(x)</button> 
     <button id="pentera" class="columna3">parte_entera(x)</button> 
     </p> 
     <p> 
     <button id="potencia2" class="columna1">2<sup>x</sup></button> 
     <button id="factorial" class="columna2">x!</button> 
     <button id="igual" class="columna3">=</button> 
     </p> 


    </section> 
    </body> 
</html>

Code Mon JavaScript:

$(function() { 
    function igualarBotones(){ 
    var columna1 = $(".columna1"); 
    setMax(columna1);  
    var columna2 = $(".columna2"); 
    setMax(columna2); 
    var columna3 = $(".columna3"); 
    setMax(columna3); 
    } 

    function setMax(columna){ 
    var maxColumna = -1; 
    for(i=0; i<columna.length; i++){ 
     if(columna[i].css("width") > maxColumna){   
     maxColumna = columna[i].css("width"); 
     } 
    } 
    for(i=0; i<columna.length; i++){ 
     columna[i].css("width",maxColumna); 
    } 
    } 

});

Tout le monde sait pourquoi il nest pas travailler?

EDIT: J'ai utilisé $(columna[i]).css au lieu de columna[i].css et cela a fonctionné. Cependant, je ne parviens pas à ce que ma fonction igualarBotones() soit définie lors du chargement du corps, je pense que cela doit être quelque chose lié à la façon dont j'ai nommé ou écrit la fonction. Si j'écris le Javascript ainsi:

$(function() { 
    var columna1 = $(".columna1"); 
    setMax(columna1);  
    var columna2 = $(".columna2"); 
    setMax(columna2); 
    var columna3 = $(".columna3"); 
    setMax(columna3); 

    function setMax(columna){ 
    var maxColumna = -1; 
    for(i=0; i<columna.length; i++){ 
     if(parseFloat($(columna[i]).css("width")) > parseFloat(maxColumna)){   
     maxColumna = $(columna[i]).css("width"); 
     } 
    } 
    columna.css("width",maxColumna);  
    } 
});

cela fonctionne, mais je veux le faire avec une fonction igualarBotones() qui est chargé avec le corps. Une idée de ce que je fais mal?

Merci à tous, Luis.

Source

2017-07-08 Luiscri

Utilisez FlexBox ... css pas besoin de script pour le faire – charlietfl

je sais, mais je veux la pratique jQuery et ce fut une façon Je pourrais tester jQuery. Méthode css(). Pourrait-il être fait comme je l'ai montré sur le post? – Luiscri

Je suggère d'utiliser CSS pour cela, le problème dans votre code est que vous êtes en boucle la façon non-jquery .. votre logique devrait fonctionner si vous avez utilisé $ (columna [i]) 'au lieu de' columna [i] '- si vous allez sur la route jquery - je suggère fortement d'utiliser la fonction' .each' –

La question est de comprendre la différence entre la représentation jquery des éléments et des éléments "bruts" en javascript. Cela signifie que cela renvoie un objet jquery qui est une collection de tous les éléments spécifiés par le sélecteur (.column1 dans ce cas). Lorsque vous parcourez cette collection jquery (columna[i]), vous n'obtenez pas une représentation jquery des éléments mais en réalité des éléments bruts eux-mêmes (ou une représentation javascript native des éléments). Les éléments javascript natifs n'ont pas de fonction .css. Par conséquent, lorsque vous entourez chaque élément autour de $(...) en faisant $(columna[i]), vous êtes à nouveau confronté à une représentation jquery de chaque élément et en tant que tel, vous pouvez utiliser .css. C'est pourquoi le premier ne fonctionne pas et le dernier fonctionne.

SUGGESTION EXTRA

Puisque vous apprenez me laisser jquery ajouter ceci: Jquery a une fonction .each que vous devez réellement utiliser pour boucler sur un objet jquery qui contient des éléments.

donc cette fonction:

function setMax(columna){ 
    var maxColumna = -1; 
    for(i=0; i<columna.length; i++){ 
     if(parseFloat($(columna[i]).css("width")) > parseFloat(maxColumna)){   
      maxColumna = $(columna[i]).css("width"); 
     } 
    } 
    columna.css("width",maxColumna);  
}

pourrait/devrait être:

function setMax(columna){ 
    var maxColumna = -1; 
    columna.each(function(){ 
     // note the use of "this" to represent each 
     // element currently being iterated over. 
     // this = raw element, $(this) = jquery object representing element. 
     if(parseFloat($(this).css("width")) > parseFloat(maxColumna)){   
      maxColumna = $(this).css("width"); 
     } 
    }); 
    columna.css("width",maxColumna);  
}

DERNIER CONSEIL

J'assiste personnellement/aider à me rappeler objet jquery dans mon code javascript par préfixer $ à toutes les variables qui sont des objets jquery afin de ne pas les oublier.

donc ceci:

var columna1 = $(".columna1");

serait:

var $columna1 = $(".columna1");

Source

2017-07-08 16:31:09 Zuks

Merci beaucoup, une réponse complète et exhaustive. Merci pour votre temps. – Luiscri

Je suis heureux que l'explication aide :) – Zuks

Je ne suis pas familier avec une fonction .css dans vanilla javascript. J'ai changé cela pour appeler la fonction jQuery .css. De plus, au moins dans le stylo, la fonction n'était pas définie lors du chargement du corps. Quelque chose ne fonctionne toujours pas dans la façon dont vous trouvez la taille maximale, mais cela devrait vous aider à démarrer.

function igualarBotones(){ 
 
    var columna1 = $(".columna1"); 
 
    setMax(columna1);  
 
    var columna2 = $(".columna2"); 
 
    setMax(columna2); 
 
    var columna3 = $(".columna3"); 
 
    setMax(columna3); 
 
    } 
 

 
    function setMax(columna){ 
 
    var maxColumna = -1; 
 
    for(var i=0; i<columna.length; i++){ 
 
     if($(columna[i]).css("width") > maxColumna){   
 
     maxColumna = $(columna[i]).css("width"); 
 
     } 
 
    } 
 
    for(i=0; i<columna.length; i++){ 
 
     $(columna[i]).css("width",maxColumna); 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>CORE2017 P3</title> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script type="text/javascript" src="calculadora.js"></script> 
 
    <link href="calculadora.css" rel="stylesheet" type="text/css" media="all"> 
 
    </head> 
 
    <body onload="igualarBotones();"> 
 
    <header> 
 
     <p>Calculator</p> 
 
    </header> 
 
    <section id="main"> 
 
     <p> 
 
     Número: <input type="text" id="pantalla"> <button id="Limpiar">Limpiar</button> 
 
     </p> 
 

 
     <p> 
 
     <button id="suma" class="columna1">+</button> 
 
     <button id="resta" class="columna2">-</button> 
 
     <button id="cuadrado" class="columna3">x<sup>2</sup></button> 
 
     </p> 
 
     <p> 
 
     <button id="inverso" class="columna1">1/x</button> 
 
     <button id="raiz" class="columna2">sqrt(x)</button> 
 
     <button id="pentera" class="columna3">parte_entera(x)</button> 
 
     </p> 
 
     <p> 
 
     <button id="potencia2" class="columna1">2<sup>x</sup></button> 
 
     <button id="factorial" class="columna2">x!</button> 
 
     <button id="igual" class="columna3">=</button> 
 
     </p> 
 

 

 
    </section> 
 
    </body> 
 
</html>

Source

2017-07-08 14:14:02 Russell

Savez-vous comment réparer que la fonction n'est pas définie lors du chargement du corps? – Luiscri

J'ai édité le poste clarifiant ce que je demande. – Luiscri

@Luiscri la fonction est définie dans le contexte prêt de jQuery et n'est pas disponible dans la portée globale. https://stackoverflow.com/questions/1055767/pourquoi-pas-pas-define-fonctions-in-jquerys-document-ready – Russell

Tous les boutons ont la même largeur - jQuery

Répondre

Questions connexes