使用 calc 计算 jQuery CSS 宽度答案

【问题标题】：jQuery CSS width calculation using calc使用 calc 计算 jQuery CSS 宽度
【发布时间】：2017-11-28 17:38:59
【问题描述】：

在尝试制作 jQuery/CSS-calc 场景后，我将元素的宽度设为等于特定数值 (32px) 乘以 input[type="number"] 字段的值后，我最终放弃了。我一直在将元素的宽度存储在变量中并在 calc 声明中使用正确的语法时遇到问题。

我最终通过在条件语句中硬编码与 1-4 中的每个值对应的 CSS 宽度值来完成我打算做的事情。虽然我让它工作，但它绝对是低效和肮脏的。我希望有人可以向我展示一些更有效的替代方案，使用 calc 或其他需要更少代码的东西来实现相同的结果。

所以总结一下——当数量为1时，目标元素span#dogFace的宽度为32px。当数量为2时，目标元素的宽度为64px，以此类推。如果您尝试将其增加到5，则会出现文本警告。

Here is the example I posted

任何建议表示赞赏！

加分：我最初试图找到一个纯 CSS 的解决方案，我认为这仍然是可能的，但我无法让它发挥作用。如果有人知道如何使用一些花哨的 CSS 来实现这一点，我很想了解它是如何工作的。

$('#input_5_78').on('change', function() {
    if (this.value >= 5) {
      $('#dogFace').hide();
      $('#xtraDog').show();
    } else {
      $('#dogFace').show();
      $('#xtraDog').show();
    }

    if (this.value == 0) {
      $('#dogFace').width('0');
      $('#xtraDog').hide();
    } else if (this.value == 1) {
      $('#xtraDog').hide();
      $('#dogFace').width('32px');
    } else if (this.value == 2) {
      $('#dogFace').width('64px');
      $('#xtraDog').hide();
    } else if (this.value == 3) {
      $('#dogFace').width('96px');
      $('#xtraDog').hide();
    } else if (this.value == 4) {
      $('#dogFace').width('128px');
      $('#xtraDog').hide();
    }
})

.emoji {
  height: 32px;
  background-position: left top;
  background-repeat: repeat-x;
  background-size: contain;
  display: inline-block;
  vertical-align: top;
}

.emoji.dog {
  background-image: url('https://afeld.github.io/emoji-css/emoji/dog.png');
}

#dogFace {
  float: left;
}

#xtraDog {
  display: none;
}

ul li.qtyField {
  list-style-type: none;
}

.qtyField label {
  float: left;
}

.qtyField input[type="number"] {
  float: left;
  font-weight: bold;
  font-size: 1.15em;
  margin: 0 0 0 15px;
  width: 45px!important;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <ul>
    <li class="qtyField">
      <label class="gfield_label" for="input_5_78">How many dogs need training?</label>
      <div class="ginput_container ginput_container_number">
        <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number">
      </div>
      <div class="gfield_description">
        <span id="dogFace" class="emoji dog"></span>
        <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span>
      </div>
    </li>
  </ul>
</form>

【问题讨论】：

哦哦哦，你的代码中有一个 if/else 混乱。您的逻辑可以简单地归结为：$('#dogFace').width(32 * this.value);

标签： jquery css calc

【解决方案1】：

可能只使用 CSS 是不可能的，但这太棒了。这是您尝试的一种变体，它稍微干燥了代码并使其更易于理解。

$('#input_5_78').on('change', function() {
  if (this.value < 5) {
    $('#xtraDog').hide();
    $('#dogFace').width(this.value * 32 + 'px');
  } else {
    $('#dogFace').width('0');
    $('#xtraDog').show();
  }
})

.emoji {
  height: 32px;
  background-position: left top;
  background-repeat: repeat-x;
  background-size: contain;
  display: inline-block;
  vertical-align: top;
}

.emoji.dog {
  background-image: url('https://afeld.github.io/emoji-css/emoji/dog.png');
}

#dogFace {
  float: left;
}

#xtraDog {
  display: none;
}

ul li.qtyField {
  list-style-type: none;
}

.qtyField label {
  float: left;
}

.qtyField input[type="number"] {
  float: left;
  font-weight: bold;
  font-size: 1.15em;
  margin: 0 0 0 15px;
  width: 45px!important;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <ul>
    <li class="qtyField">
      <label class="gfield_label" for="input_5_78">How many dogs need training?</label>
      <div class="ginput_container ginput_container_number">
        <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number">
      </div>
      <div class="gfield_description">
        <span id="dogFace" class="emoji dog"></span>
        <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span>
      </div>
    </li>
  </ul>
</form>

【讨论】：

代码是这样格式化的，因为在盯着屏幕看了太多小时后，我很快又草率地从我的 wordpress 网站上切了一些零碎的东西，让它在 W3C 的小提琴上工作。除非我使用那些讨厌的条件，否则我无法让语法工作。无论如何，感谢您抽出宝贵时间提供帮助！

【解决方案2】：

我的回答略有不同。几个指针和 cmets 解释了代码 sn-p 中包含的 javascript;

您希望养成编写函数来运行可重复代码的习惯。
缩进您的代码并对其进行注释以供将来参考和阅读
再次缩进您的 CSS 以使其易于阅读，它还将帮助人们在未来的答案中为您提供帮助

JS斌在这里：http://jsbin.com/vunajej/edit?html,css,js,output

这里的片段：

  var validate_num_dogs = function ( e ) { // Declare function with variable e for element ;)
      
      $( '#xtraDog' ).hide(); // Hide warning msg each time the function is called
        
        // For simple conditionals it's not required to use braces {}
        if ( e.val() >= 5 ) // If elements value is greater than or == to 5 (max)
          $( '#xtraDog' ).show(); // Display warning msg
    
        else
          $( '#dogFace' ).width( 32 * e.val() ); // Width value is simply 32px multiplied by input value
    
      };


jQuery( document ).ready( function( $ ) {
  
  $( '#input_5_78' ).on( 'change', function(){
      
    validate_num_dogs( $(this) ); // Call function, $(this) is the current element e.g. #input_5_78

  });
                        
});

.emoji {
  height:32px; 
  background-position:left top;
  background-repeat:repeat-x;
  background-size:contain;
  display:inline-block;
  vertical-align:top;
}

.emoji.dog {
  background-image:url('https://afeld.github.io/emoji-css/emoji/dog.png');
}

#dogFace {
  float: left;
}

#xtraDog {
  display: none;
}

ul li.qtyField {
  list-style-type: none;
}

.qtyField label {
  float: left;
}

.qtyField input[type="number"] {
  float: left;
  font-weight: bold;
  font-size: 1.15em;
  margin: 0 0 0 15px;
  width: 45px!important;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form>
<ul>
	<li class="qtyField">
		<label class="gfield_label" for="input_5_78">How many dogs need training?</label>
		<div class="ginput_container ginput_container_number">
			<input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number">
		</div>
		<div class="gfield_description">
			<span id="dogFace" class="emoji dog"></span>
			<span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span>
		</div>
	</li>
</ul>
</form>

</body>
</html>

【讨论】：