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

问题在于理解元素的jquery表示和javascript中的“raw”元素之间的差异。

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

最后提示

我亲自帮助/帮助自己记住我的javascript代码中的jquery对象，方法是将$添加到jquery对象的所有变量中，以免忘记它们。

所以这个：

var columna1 = $(".columna1");

将是：

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

Answer 2

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

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

2 个答案: