jquery - 制作加号和减号计数器按钮,jQuery
问题描述
有成人和儿童两个柜台。我建立了类似下面的东西。
$(document).ready(function(){
var n = 0;
var adultCounter = ".counter-adult";
var childCounter = ".counter-child";
$(adultCounter).val(n);
$(childCounter).val(n);
$(".plus-adult").on("click", function(){
$(adultCounter).val(++n);
})
$(".minus-adult").on("click", function(){
if (n > 0) {
$(adultCounter).val(--n);
}
})
$(".plus-child").on("click", function(){
$(childCounter).val(++n);
})
$(".minus-child").on("click", function(){
if (n > 0) {
$(childCounter).val(--n);
}
})
if ($(childCounter).val(n) > 0) {$(".minus-child").removeClass("de-active-counter")}
});
.person-bar-wrap .person-count {
position: relative;
width: 300px;
display: flex;
align-items: center;
border-left: 1px solid #dcdde1;
cursor: pointer;
}
.person-bar-wrap .person-count .hidden-filter {
z-index: 999;
position: absolute;
width: 301px;
top: 75px;
border: 1px solid #dcdde1;
left: -1px;
background-color: #fff;
cursor: default;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-header {
padding: 20px 20px 20px 20px;
}
person-bar-wrap .person-count .hidden-filter
.hidden-filter-context {
display: flex;
border-top: 1px solid #dcdde1;
align-items: center;
padding: 10px 20px;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context p.person-t {
flex: 1;
display: flex;
justify-content: flex-start;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .counter, .plus {
display: flex;
justify-content: center;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context input.counter {
width: 24px;
margin: 0 10px;
border-width:0px;
border:none;
box-shadow: none;
padding-left: 5px;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .minus, .plus {
background-color: #995d64;
color: #fff;
width: 28px;
height: 28px;
border-radius: 3px;
align-items: center;
text-align: center !important;
margin: auto;
}
.person-bar-wrap .person-count .hidden-filter
.hidden-filter-context .de-active-counter {
background-color: #dcdde1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="person-bar-wrap">
<div class="person-count">
<div class="hidden-filter">
<div class="hidden-filter-context">
<p class="person-t">Adult</p>
<span class="minus-adult minus">-</span>
<input class="counter counter-adult" type="" name="" value="">
<span class="plus-adult plus">+</span>
</div>
<div class="hidden-filter-context">
<p class="person-t">Child</p>
<span class="minus-child minus de-active-counter">-</span>
<input class="counter counter-child" type="" name="" value="">
<span class="plus-child plus">+</span>
</div>
</div>
</div>
</div>
两个计数器都在工作。减号和加号,但如果那部分还没有完全解决,我会尝试addClass("de-active-counter")
反击== 0
并删除课程。不管用。我认为如何构建计数器功能是个问题……如果是,那我该怎么做呢? > 0
removeClass()
解决方案
您需要在检查时将该值转换为整数> 0
。
$(document).ready(function() {
var n = 0;
var adultCounter = ".counter-adult";
var childCounter = ".counter-child";
$(adultCounter).val(n);
$(childCounter).val(n);
$(".plus-adult").on("click", function() {
$(adultCounter).val(++n);
if (parseInt($(adultCounter).val()) > 0) {
$(".minus-adult").removeClass("de-active-counter")
}
})
$(".minus-adult").on("click", function() {
if (n > 0) {
$(adultCounter).val(--n);
}
if (parseInt($(adultCounter).val()) == 0) {
$(".minus-adult").addClass("de-active-counter")
} else {
$(".minus-adult").removeClass("de-active-counter")
}
})
$(".plus-child").on("click", function() {
$(childCounter).val(++n);
if (parseInt($(childCounter).val()) > 0) {
$(".minus-child").removeClass("de-active-counter")
}
})
$(".minus-child").on("click", function() {
if (n > 0) {
$(childCounter).val(--n);
}
if (parseInt($(childCounter).val()) == 0) {
$(".minus-child").addClass("de-active-counter")
} else {
$(".minus-child").removeClass("de-active-counter")
}
})
});
.person-bar-wrap .person-count {
position: relative;
width: 300px;
display: flex;
align-items: center;
border-left: 1px solid #dcdde1;
cursor: pointer;
}
.person-bar-wrap .person-count .hidden-filter {
z-index: 999;
position: absolute;
width: 301px;
top: 75px;
border: 1px solid #dcdde1;
left: -1px;
background-color: #fff;
cursor: default;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-header {
padding: 20px 20px 20px 20px;
}
person-bar-wrap .person-count .hidden-filter .hidden-filter-context {
display: flex;
border-top: 1px solid #dcdde1;
align-items: center;
padding: 10px 20px;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-context p.person-t {
flex: 1;
display: flex;
justify-content: flex-start;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.counter,
.plus {
display: flex;
justify-content: center;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-context input.counter {
width: 24px;
margin: 0 10px;
border-width: 0px;
border: none;
box-shadow: none;
padding-left: 5px;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .minus,
.plus {
background-color: #995d64;
color: #fff;
width: 28px;
height: 28px;
border-radius: 3px;
align-items: center;
text-align: center !important;
margin: auto;
}
.person-bar-wrap .person-count .hidden-filter .hidden-filter-context .de-active-counter {
background-color: #dcdde1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="person-bar-wrap">
<div class="person-count">
<div class="hidden-filter">
<div class="hidden-filter-context">
<p class="person-t">Adult</p>
<span class="minus-adult minus de-active-counter">-</span>
<input class="counter counter-adult" type="" name="" value="">
<span class="plus-adult plus">+</span>
</div>
<div class="hidden-filter-context">
<p class="person-t">Child</p>
<span class="minus-child minus de-active-counter">-</span>
<input class="counter counter-child" type="" name="" value="">
<span class="plus-child plus">+</span>
</div>
</div>
</div>
</div>
推荐阅读
- python - 是否有任何选项可以从 python 中的数组元素创建多个 dict
- java - 部署程序集配置不适用于 mvn 包
- python-3.x - Pandas 数据框按列名上的函数合并
- python - 如果找到分隔符,则拆分字符串
- playframework - 播放 2.4 Global.java onStart 多次调用
- excel - 使用 Excel 并行填充多个 IE WebForms
- c# - 有没有办法在 C# 中重用数据集?我想使用断开连接的架构
- google-maps-api-3 - 单击标记时显示半径
- google-apps-script - 使用 newComponseActionResponseBuilder 回复会使 gmail android 应用程序崩溃
- javascript - 如何在 React Native 中单击按钮时打开 React Native 模式?