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

Question

我正在编写一个计算器，我正在尝试让同一列中的所有按钮具有相同的宽度。为此，我使用 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() 来完成它，它会加载到正文中。知道我做错了什么吗？

谢谢大家，路易斯。

Answer 1

我不熟悉原版 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>

Answer 2

问题是了解 jquery 元素表示与 javascript 中的 "raw" 元素之间的差异。

给定 var columna1 = $(".columna1"); 这意味着它将 return 一个 jquery 对象，它是选择器（.column1 在这种情况下）的所有元素的集合已指定。

当您遍历此 jquery 集合 (columna[i]) 时，您不会得到元素的 jquery 表示，但实际上是原始元素本身（或本机 javascript 表示元素）。本机 javascript 元素没有 .css 函数。

所以当你通过这样做 $(columna[i]) 将每个元素包裹在 $(...) 周围时，你将再次处理每个元素的 jquery 表示，因此你可以使用.css。这就是为什么前者不起作用而后者起作用的原因。

额外建议

既然你正在学习 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);    
}

Could/Should 为：

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

最后提示

我个人 assist/help 我自己通过在 jquery 对象的所有变量前加上 $ 来记住我 javascript 代码中的 jquery 对象，以免忘了他们吧。

所以这个：

var columna1 = $(".columna1");

将是：

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

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

All buttons have same width - jQuery

javascript

css

jquery

width