向按钮

Question

问题：

2个div容器。第一个容器有2个按钮 - 单个和多。第二个容器有4个按钮 - 第1项，第2项，第3项，第4项。

需要逻辑： 如果选择按钮单个，我只能从项目1，项目2，项目3或项目4的按钮中选择1。

如果选择了多个按钮，我可以选择多个项目。 1或2或3或4项。

所选项目将有黑色按钮。没有选定的项目会有灰色。

以下是HTML＆amp; 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');
        });
    }
});

Answer 1

这样可行：

＆＃13;

＆＃13;

$('.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'); 
    }
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$('.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>

试试这种方式