使用计算jQuery CSS宽度计算

Question

将我的头发拉出来试图制作jQuery/CSS-calc场景后，获取元素的宽度等于特定数值（32px）乘以输入值[type =“数字“]字段，我最终放弃了。我在Calc声明中使用正确的语法将元素的宽度存储在变量&中时遇到了麻烦。

我最终完成了我所做的事情，即对条件语句中的CSS宽度值进行硬编码，该条件语句对应于1-4中的每个值。虽然我得到它的工作，但它是绝对低效的&脏。我希望有人能够向我展示一些更高效的替代方案，使用calc或其他需要更少代码的结果来完成相同的结果。

综上所述 - 当数量为1时，目标元素span#dogFace的宽度为32px。当数量为2时，目标元素的宽度为64px，依此类推。如果您尝试将其增加到5，则会出现文字警告。

Here is the example I posted

任何意见赞赏！

奖励积分：我最初试图找到一个CSS-only解决方案，我认为它仍然是可能的，但我无法完成它的工作。如果有人知道如何用一些花哨的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>

Answer 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>

Answer 2

我去我的回答方式略有不同。解释包含在代码片段中的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> 
 
\t <li class="qtyField"> 
 
\t \t <label class="gfield_label" for="input_5_78">How many dogs need training?</label> 
 
\t \t <div class="ginput_container ginput_container_number"> 
 
\t \t \t <input name="input_78" id="input_5_78" step="any" min="0" max="5" value="0" type="number"> 
 
\t \t </div> 
 
\t \t <div class="gfield_description"> 
 
\t \t \t <span id="dogFace" class="emoji dog"></span> 
 
\t \t \t <span id="xtraDog"><br><br>Woah, that's a lot of dogs!<br />Please call (480) 555-1234 to discuss your training needs.</span> 
 
\t \t </div> 
 
\t </li> 
 
</ul> 
 
</form> 
 

 
</body> 
 
</html>