javascript - Jquery 宽度 100% 减去像素

Question

我正在尝试将 elemrnt 上的宽度设置为 100% 减去一个以像素为单位的变量。

我的 subtractWidth 变量返回一个以像素为单位的动态值，例如:170

$('#chartTitle').each(function(i){
  var elem = $(this);
  var parent = $(elem).parent();
  var next = $(parent).next();

  var maxWidth = '100%';
  var subtractWidth = next.width();

  elem.width(maxWidth) - subtractWidth;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="chartTitle" />
</div>
<div> ... </div>

我是不是错过了什么？

如有任何帮助或建议，我们将不胜感激 - 提前致谢。

Answer 1

先应用100%的宽度，然后根据应用的宽度进行计算。

您的问题是，在您的行中 elem.width(maxWidth) - subtractWidth; elem 将 maxWidth 设置为 100% 但之后没有减去它。

calculate = function(){
  var total = '50%';
  var subtractWidth = $('#div1').width();

  $('#div2').width(total)
  $('#div2').width($('#div2').width() - subtractWidth);
}

div{
  background-color: red;
  height: 20px;
   display: block;
   width: 0px;
  
}

#div1{
  width: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<hr>
<div id="div2"></div>
<hr>
<button onclick="calculate()">calculate</button>