
input.jpg
<div class="forNumber">
<input type="text" name='arithmeticN' value="0" class="numInput" onkeyup="this.value=this.value.replace(/\D/g,'')" min='0'>
<div class="arithmetic">
<div class="chevron arithmeticAddBox">
<i class="arithmeticAdd"></i>
</div>
<div class="chevron arithmeticMinusBox">
<i class="arithmeticMinus"></i>
</div>
</div>
</div>
.forNumber {
width: 88px;
height: 32px;
background: #ffffff;
border: 1px solid #d9d9d9;
opacity: 1;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.numInput {
width: 67px;
text-indent: 5px;
}
.arithmetic {
width: 21px;
height: 32px;
border-left: 1px solid #d9d9d9;
}
.arithmeticAdd,
.arithmeticMinus {
width: 9px;
height: 6px;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.arithmeticAddBox {
width: 20px;
height: 16px;
position: relative;
border-bottom: 1px solid #d9d9d9;
cursor: pointer;
}
.arithmeticMinusBox {
width: 20px;
height: 16px;
position: relative;
cursor: pointer;
}
.arithmeticAdd {
background: url(../../images/settings_images.png) 0px -185px no-repeat;
}
.arithmeticAddBox:hover .arithmeticAdd {
background: url(../../images/settings_images.png) -17px -185px no-repeat;
}
.arithmeticMinus {
background: url(../../images/settings_images.png) -35px -185px no-repeat;
}
.arithmeticMinusBox:hover .arithmeticMinus {
background: url(../../images/settings_images.png) -52px -185px no-repeat;
}
//加减
$('.chevron').click(function () {
var sinput = $(this).parents('.arithmetic').prev('.numInput');
if ($(this).hasClass('arithmeticAddBox')) {
sinput.val(parseInt(sinput.val()) + 1);
} else {
if (parseInt(sinput.val()) < 1) { return } sinput.val(parseInt(sinput.val()) - 1);
}
});
网友评论