如果用户将输入值增加到(0)以上,我需要将类(设备添加)添加到父潜水(设备),如果他决定将值设置回(0),则将其删除,我到目前为止所做的:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Some Text</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="device workstations">
<h3>Workstations</h3>
<div class="sub">
<input id="workstation" type="text" value="0" min="0" max="1000" class="form-control stepper">
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="device servers">
<h3>Servers</h3>
<div class="sub">
<input id="server" type="text" value="0" min="0" max="1000" class="form-control stepper">
</div>
</div>
</div>
More cols as above...
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<a href="#" class="make_url">Order URL</a>
</div>
</div>
</div>
<script>
$('.make_url').click(function(e) {
e.preventDefault();
var url = "http://www.example.com/cart.php?a=add&pid=" + $("input[name=data-location]:checked").data('id') + "&configoption[569]=" + $('#workstation').val() + "&configoption[570]=" + $('#server').val() + "&configoption[572]=" + $('#mobile').val();
alert(url);
//window.location.href = url;
/*
window.open(url, '_blank');
*/
});
// This is not working as it should
$('input.stepper').click(function() {
if ($(this).val() > 0) {
$(this).parent().parent().parent().addClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
} else {
$(this).parent().parent().parent().removeClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
}
});
</script>
上述类仅在单击输入时有效,但在使用向上/向下箭头时无效。
提前致谢。
编辑: jquery.stepper.min.js 用于步进
步进器会将输出子 div 更改为
<div class="sub">
<div class="stepper-wrap" style="margin: 0px 45px 0px 0px;">
<input id="servers" value="0" min="0" max="1000" class="form-control stepper" style="margin: 0px;" type="text">
<div class="stepper-btn-wrap">
<a class="stepper-btn-up">▴</a>
<a class="stepper-btn-dwn">▾</a>
</div>
</div>
</div>
@Mihai 使用 .parents() 将向所有 div 添加Class,而不仅仅是父级。
我现在可以并且将使用 type="number" 并删除步进器并使用 $('input.form-control').click(function() { 它会像 Bendy 所说的那样做,并且失去自定义外观以附加并以其他方式进行,因为输入类型号很难看
谢谢大家的帮助。