向按钮添加/删除jquery逻辑
Add/remove jquery logic to buttons
问题:
2个div容器。第一个容器有2个按钮-单个&倍数第二个容器有4个按钮-项目1、项目2、项目3、项目4。
所需逻辑:如果选择按钮Single,我只能从项目1、项目2、项目3或项目4的按钮中选择1。
如果选择按钮Multiple,我可以选择多个项目。1或2项或3或4项。
所选项目将有黑色按钮。所选项目都不会为灰色。
以下是HTML&使用JS。但不知何故,多逻辑不起作用。
HTML:
<div class="select-type">
<a href="javascript:void(0);" class="single-type">single</a>
<a href="javascript:void(0);" class="multi-type">Multiple</a>
</div>
<div class="select-item">
<a href="javascript:void(0);" class="btn">Item 1</a>
<a href="javascript:void(0);" class="btn">Item 2</a>
<a href="javascript:void(0);" class="btn">Item 3</a>
<a href="javascript:void(0);" class="btn">Item 4</a>
</div>
JS:
$('.select-type a').click(function(){
$('.select-type a').removeClass('selected');
$(this).addClass('selected');
if($('.single-type').hasClass('selected')){
$('.select-item a').removeClass('multiType');
$('.select-item a').addClass('singleType');
$('.select-item a.singleType').click(function(){
$('.select-item a.singleType').addClass('type-deselected');
$(this).removeClass('type-deselected');
});
}
else if($('.multi-type').hasClass('selected')){
$('.select-item a').removeClass('singleType');
$('.select-item a').addClass('multiType');
$('.select-item a').removeClass('type-deselected');
$('.select-itema.multiType').click(function(){
$('.select-item a').addClass('type-deselected');
$(this).removeClass('type-deselected');
$(this).addClass('type-selected');
});
}
});
这将起作用:
$('.select-type a').click(function() {
$('.select-type a').removeClass('selected');
$('.select-item a').removeClass('type-selected').addClass('type-deselected');
$(this).addClass('selected');
});
$('.select-item a').click(function() {
var $this = $(this);
var multipleAllowed = $('.select-type a.selected').hasClass('multi-type');
var selectedCount = $('.select-item a.type-selected').length;
var selected = $this.hasClass('type-selected');
if (selected) {
$this.removeClass('type-selected').addClass('type-deselected');
} else {
if (selectedCount == 1 && !multipleAllowed) {
$('.select-item a').not($this).removeClass('type-selected').addClass('type-deselected');
$this.removeClass('type-deselected').addClass('type-selected');
} else {
$(this).addClass('type-selected').removeClass('type-deselected');
}
}
});
.select-item a,
.select-item a.type-deselected,
.select-type a {
background-color: grey;
color: #fff;
}
.select-item a.type-selected,
.select-type a.selected {
background-color: black;
color: #fff;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-type">
<a href="#" class="single-type btn">single</a>
<a href="#" class="multi-type btn">Multiple</a>
</div>
<br>
<div class="select-item">
<a href="#" class="btn type-deselected">Item 1</a>
<a href="#" class="btn type-deselected">Item 2</a>
<a href="#" class="btn type-deselected">Item 3</a>
<a href="#" class="btn type-deselected">Item 4</a>
</div>
$('.select-type a').click(function() {
$('.select-type a').removeClass('selected');//remove selected class on type click
$('.select-item a').removeClass('selected');//remove selected class on type click
$(this).addClass('selected');
if ($('.single-type').hasClass('selected')) {
$('.select-item').removeClass('multiType').addClass('singleType');
} else if ($('.multi-type').hasClass('selected')) {
$('.select-item').removeClass('singleType').addClass('multiType');
}
});
$('.select-item a').click(function() {
var check = $(this).parent().hasClass('singleType');
if (check) {//check if type is single
if ($('.select-item a').hasClass('selected')) {
$('.select-item a').removeClass('selected');//if there is selected remove the select class
$(this).addClass('selected');//add select on click element
} else {
$(this).addClass('selected');//add select on click element
}
} else {
$(this).addClass('selected');//add select on click element
}
});
.selected {
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-type">
<a href="javascript:void(0);" class="single-type">single</a>
<a href="javascript:void(0);" class="multi-type">Multiple</a>
</div>
<div class="select-item">
<a href="javascript:void(0);" class="btn">Item 1</a>
<a href="javascript:void(0);" class="btn">Item 2</a>
<a href="javascript:void(0);" class="btn">Item 3</a>
<a href="javascript:void(0);" class="btn">Item 4</a>
</div>
尝试这种方式
相关文章:
- 在jquery和javascript中创建自定义日历背后的逻辑
- jQuery逻辑-无限滚动+调用javascript
- 使用socket.io、jquery mobile、socket.emit();的时序逻辑有点奇怪;
- 如何使用逻辑运算符 JavaScript 或 jQuery
- 将PHP逻辑实现到jQuery
- 在jQuery中,可以在字符串之间添加条件逻辑吗
- 逻辑“>"以及“<"在Jquery函数内部不起作用
- JQuery 逻辑未应用于动态创建的 html
- 编写jQuery更有说服力 - 结合逻辑
- jQuery 递归逻辑树
- 对于循环逻辑,数组中的几个值 - Javascript 和 JQuery
- Jquery 优化表的结果:两个或多个逻辑语句
- jQuery 逻辑过滤
- 对表行的每个按钮执行jQuery逻辑
- 开放时间的Jquery逻辑
- Jquery逻辑混乱
- Jquery逻辑从字符串中获取结果
- 如何从JavaScript/jQuery逻辑中删除HTML代码
- jQuery逻辑的问题.如果选中了另一个复选框,则需要取消选中一个复选框,反之亦然
- 向按钮添加/删除jquery逻辑