所有的按钮都有相同的宽度 - jQuery

我正在编程一个计算器，我试着让同一列中的所有按钮都有相同的宽度。对于那个使用jQuery的我（我这样做，因为我有一些考试，我想练习）。所有的按钮都有相同的宽度 - jQuery

我的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>

我的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); 
    } 
    } 

});

任何人都知道为什么它不是工作？

编辑：我以前$(columna[i]).css代替columna[i].css和它的工作。然而，我没有达到我的功能igualarBotones()得到定义加载身体时，我认为它必须是与我如何命名或编写函数相关的东西。如果我写的JavaScript这样：

$(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);  
    } 
});

它的工作原理，但我想与被加载与身体机能igualarBotones()做到这一点。任何想法我做错了什么？

谢谢大家，路易斯。

来源

2017-07-08 Luiscri

使用CSS Flexbox的...无需脚本来做到这一点 – charlietfl

我知道，但我想实践jQuery的，这是一种方式我可以测试jQuery。 css（）方法。我可以在帖子中看到吗？ – Luiscri

我会建议使用CSS来解决这个问题，你的代码中的问题是你循环的非jQuery方式..如果你使用'$（columna [i]）'而不是'columna [i] ' - 如果你要去jquery路线 - 我强烈建议使用'.each'功能 –

问题是理解元素jquery的表示和在javascript “原始” 的元件之间的不同。

鉴于var columna1 = $(".columna1");这意味着它将返回一个jquery对象，该对象是选择器（本例中为.column1）指定的所有元素的集合。当你遍历这个jquery集合（columna[i]）时，你不会得到元素的jquery表示，但实际上是原始元素本身（或元素的原生javascript表示）。原生JavaScript元素没有.css功能。

所以，当你做这个$(columna[i])你，然后再次与每个元素的一个jQuery表示处理，因此你能够使用的CSS环绕$(...)每个元素。这就是为什么前者不起作用和后来的作品。

EXTRA SUGGESTION

既然你正在学习的jQuery让我补充一点：jQuery有一个.each功能，你实际上应在包含元素的jQuery使用循环。

所以这个功能：

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);  
}

可以/应该是：

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);  
}

最后一个技巧

我个人协助/帮助在前面加上我记得jQuery对象在我的javascript代码$所有变量是jquery对象，以便不会忘记它们。

所以这个：

var columna1 = $(".columna1");

是：

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

来源

2017-07-08 16:31:09 Zuks

非常感谢你，非常全面和详尽的答复。谢谢你的时间。 – Luiscri

我很高兴解释帮助:) – Zuks

我不熟悉香草javascript中的.css函数。我改变了它，所以它会调用jQuery .css函数。另外，至少在笔中，功能在身体加载时没有定义。如何找到最大尺寸仍有问题，但这应该让你开始。

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>

来源

2017-07-08 14:14:02 Russell

你知道如何解决函数未定义何时加载正文？ – Luiscri

我编辑了这篇文章，澄清我在问什么。 – Luiscri

@Lisiscri该函数在jQuery的准备上下文中定义，并且在全局范围内不可用。 https://stackoverflow.com/questions/1055767/why-can-i-not-define-functions-in-jquerys-document-ready – Russell

所有的按钮都有相同的宽度 - jQuery

回答

相关问题