JavaScript按鈕一次只能切換一個

我正在嘗試使用按鈕來過濾頁面中元素的列表。JavaScript按鈕一次只能切換一個

到目前爲止，如果點擊一個按鈕所有的人將被禁用，然後如果我點擊一個不同的那麼只有將被啓用，其他人將被禁用。

我無法工作，如何將其切換，所以如果該按鈕已經處於活動狀態，將取消禁用所有按鈕，包括本身。

HTML：

<div class="calendar-filter"> 
    <a href="#" class="dnco calendar-color-key btn btn-raised"><i class="material-icons"></i>Duty NCO</a> 
    <a href="#" class="main calendar-color-key btn btn-raised"><i class="material-icons"></i>Main Cadets</a> 
    <a href="#" class="wmt calendar-color-key btn btn-raised"><i class="material-icons"></i>Wing Marching Team</a> 
    <a href="#" class="juniors calendar-color-key btn btn-raised"><i class="material-icons"></i>Juniors</a> 
    <a href="#" class="exercise calendar-color-key btn btn-raised"><i class="material-icons"></i>Exercise</a> 
    <a href="#" class="other calendar-color-key btn btn-raised"><i class="material-icons"></i>Other</a> 
</div>

JS：

function filterButtonClick(buttonClass) { 
    $('.calendar-color-key').each(function() { 
     $(this).addClass('disabled'); 

     if($(this).hasClass(buttonClass)) { 
      $(this).removeClass('disabled'); 
     } 
    }); 
} 

$('.calendar-color-key').on('click', function() { 
    var filterButtonClasses = this.classList; 
    filterButtonClick(filterButtonClasses[0]); 
});

來源

2016-01-22 georgehartlett

$(".calendar-color-key").click(function() { //select by class 
    var clicked = $(this); 

    if (clicked.hasClass('toggle')) { 
    $('.calendar-color-key').removeClass('disabled'); //enable all again 
    clicked.removeClass('toggle'); 
    } else { 
    $('.calendar-color-key').removeClass('toggle'); 
    clicked.addClass('toggle'); 
    clicked.removeClass('disabled'); 
    $('.calendar-color-key').not(clicked).addClass('disabled'); //disable everything except clicked element 
    } 
});

https://jsfiddle.net/6kx8ncdb/2/

來源

2016-01-22 10:46:37

謝謝，但這沒有奏效。我試圖切換上的所有元素的'disabled'類被點擊按鈕時，改變激活鍵到另一個元素，如果被點擊代替。 – georgehartlett

@georgehartlett更新（因爲你談論「禁用」，但它是一個稱爲禁用的「類」）。還在'css'中增加了一個'color'，使其更加清晰 –

即將到來！一旦按鈕被點擊，是「積極的」我希望能夠再次點擊它來取消禁止所有按鈕像一個切換 – georgehartlett

爲什麼不直接使用一個類的默認類的狀的過濾器按鈕按鈕，這樣當你想禁用所有這些只需使用：

$(".filter-button").addClass("disabled");

，並使用主動類這將是一個很大的幫助，所以你可以有

$(".active").on('click', function(){ 
    $(".filter-button").addClass("disabled"); 
    $(".active").removeClass("active"); 
});

UPDATE：不添加禁用時忘記刪除活動類我更新了代碼。

來源

2016-01-22 10:54:25

JavaScript按鈕一次只能切換一個

回答

相關問題