Question

    $(document).ready(function() {
      $(window).resize(function() {
        var altura = $(".textiu").height();
        if (altura > 20) {
          $('.logo').css("background-color", "yellow")
        }
      });
    });

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}
.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}
.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}
.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> 
  </button>
  <button class="butt"><span class="textiu">Portfólio</span><span class="fotiu"></span> 
  </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu">   </span> 
  </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> 
  </button>
</div>

这是小提琴。 https://jsfiddle.net/ks6udwLc/

我需要什么：

我想用文本（.textiu）改变跨度的高度，基于第一个大小（它有两个单词，所以在浏览器调整大小时它会分成两行并混淆布局）。
在我发布的JavaScript中，它适用于我的浏览器（Chrome）。现在我正在改变另一个div的颜色，以检查它是否正常工作，因为我不知道如何继续。所以我有3个问题：
1. 如何在没有固定号码的情况下进行.height检查？我想到可能得到跨度高度，并使用像if（altura＆gt; altura + 50％altura或类似的东西）。有可能吗？
2. 如何更改其他按钮的高度？我会更改高度并添加<br>以将文本放到空间的底部，就像更大的一样。在jQuery中看到了一些（this）或类似的东西，但是无法弄明白。顺便说一下，所有的按钮都有相同的类。
3. 最后，jQuery实际上是最好的方法吗，或者我应该只使用媒体查询？

Answer 1

看看这个并告诉我你的想法 https://jsfiddle.net/ks6udwLc/1/

$(document).ready(function() {
  $(window).resize(function() {
    var altura1 = $(".butt:nth-child(1) .textiu").height();
    $('.butt:nth-child(n+2) .textiu').css("lineHeight", altura1 + 'px');
  });
});

首先，用第1个按钮检查跨度的高度。然后我们将相同的高度设置为与第一个相同的其他跨度。选择器：nth-child（n + 2）表示我们处理索引＆gt; = 2（0 + 2 = 2,1 + 2 = 3等）的元素。

EDIT2：还有一个解释 - 我将line-height设置为最后三个元素，因为它们只有一个单词，而这个属性使得它们的高度为第一个，文本以verticaly为中心：）

Answer 2

点击此处 jsfiddle 或下面的代码段

（我不是说它是最好的解决方案，但它有效:)）

我使用了.on( "resize",function()而不是.resize()，因为on()是动态的，所以您不需要刷新页面才能看到结果

在此处详细了解： on() 或此处 .on('click') vs .click() （关于click()功能，但逻辑是同样的）

然后，我设置了2个变量highestText和highestBut，其值为0

然后使用.each(function(){（info here），我将元素的高度与相同的类（首先.textiu然后.butt进行比较，它没有＆＃39对于彼此而言，每当我找到比前一个更大的元素时，我将height的值赋给变量

所以例如我将范围与类textiu进行比较。第一个textiu的高度为20px。 if执行此操作：是20px＆gt; 0？是 - ＆gt; highestText = 20px。

然后第二个元素的高度为15px。是15px> 20px？不 - ＆gt;什么都不做，转移到下一个元素。等等。

所以在each函数的末尾，变量highestText具有最大高度的元素高度的值：）

逻辑是，如果任何元素的高度大于其余元素（当调整窗口大小时），其余元素将继承该高度，以便它们都具有相同的高度（最大高度）

和.butt

相同

希望我解释好，让我知道该解决方案是否适合您;）

编辑：您说的是$(this)，

this是对调用当前函数的成员的引用

所以例如在我的解决方案中

  $('.textiu').each(function(){  
            if($(this).height() > highestText){  
            highestText = $(this).height();  
    }

$(this)指的是.textiu

点击此处 What is $(this)? 或此处 $(this) might be confusing

点击以下查看SNIPPET

＆＃13;

$(window).on( "resize",function() {
    var highestText = 0,
        highestBut = 0
         
        $('.textiu').each(function(){  
                if($(this).height() > highestText){  
                highestText = $(this).height();  
        }
         });
         $('.butt').each(function(){  
                if($(this).height() > highestBut){  
                highestBut = $(this).height();  
        }
         });
      $('.butt').height(highestBut);  
    $('.textiu').height(highestText);

});

＆＃13;

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}

.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}

.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}

.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Portfólio</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> </button>
</div>

＆＃13;

根据第4个更改3个元素的高度

2 个答案: