2016-08-17 23 views
0

質問:ボタンへのjqueryロジックの追加/削除

2個のdivのコンテナ。 1番目のコンテナは2つのボタン - 単一&倍です。ボタンシングルが選択 場合が、私は項目1、項目2、項目のボタンから1つだけを選択することができます。4.

がロジックに必要な項目1、項目2、項目3、項目 -​​ 第二の容器には、4つのボタンがあります3または項目4を選択してください。

ボタン複数のを選択すると、複数の項目を選択できます。 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'); 
     }); 
    } 
}); 

答えて

1

これは動作します:

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

+0

こんにちは..あなたの助けのために非常に感謝!それは素晴らしいです..別の問題..単一のタイプでは、ユーザーがクリックすると、 "アイテム選択"が追加されます。他のボタンはクラス名 "item-deselected"を追加する必要があります。マルチタイプにも同じです。 – TDG

+0

@TDG上記の私の更新を参照してください。私があなたのコメントを正しく理解すれば、それはあなたをソートする必要があります。そうでない場合は、私に知らせてください – DelightedD0D

+0

申し訳ありませんボス.. "select-type" add/remove selectは前のように大丈夫です。 "select-item"にのみ "select/deselect"を追加する必要があります – TDG

0

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

この方法を試してみてください

関連する問題