拔出头发试图制作jQuery / CSS-calc场景后,将元素的宽度等于特定数值(32px)乘以输入[type =“number”]字段的值,I最终放弃了。我一直遇到麻烦将元素的宽度存储在变量&在calc声明中使用正确的语法。
我最终通过对与1-4中每个值对应的条件语句中的CSS宽度值进行硬编码来完成我的目的。虽然我得到了它的工作,但它绝对是效率低下的。脏。我希望有人可以告诉我一些更有效的替代方案,使用calc或其他需要更少代码的东西来实现相同的结果。
总而言之 - 当数量为1
时,目标元素span#dogFace
的宽度为32px
。当数量为2
时,目标元素的宽度为64px
,依此类推。如果您尝试将其增加到5
,则会显示文本警告。
欢迎任何建议!
奖励积分:我最初试图找到一个仅限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>
答案 0 :(得分: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>
答案 1 :(得分:0)
我的回答略有不同。一些指针和评论解释了代码片段中包含的javascript;
JS Bin: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>