0
2个div容器。第一个容器有2个按钮 - 单个&倍数。第二容器具有4个按钮 - 项目1,项目2,第3项,第4项
逻辑需要: 如果选择的按钮单,我可以从第1项,第2项,项的按钮仅选择1 3或第4项。
如果按钮选择了多个,我可以选择多个项目。 1或2或3或4个项目。
所选项目将会有黑色按钮。没有选定的项目会有灰色。
以下是使用的JS的HTML &。但不知何故多逻辑不起作用。
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');
});
}
});
嗨..非常感谢您的帮助!它工作真棒..另一个问题..在单一类型,如果用户点击,将添加“项目选择”。其他按钮必须添加类名“item-deselected”。多种类型也是如此。 – TDG
@TDG在上面看到我的更新。如果我正确理解你的评论,那应该让你分类。如果没有,让我知道 – DelightedD0D
对不起老板..“选择类型”添加/删除选择是像上一个好。我必须添加“选择/取消选择”只为“选择项目” – TDG