jQuery的 - 添加/刪除類

Question

HTML

<div class="show-content-1 hidden"> 
    content 1 
</div> 

<div class="show-content-2 hidden"> 
    content 2 
</div> 

<div class="show-content-3 hidden"> 
    content 3 
</div> 

<div class="switch-content"> 
    <a id="content-1" href="#">link 1</a> 
    <a id="content-2" href="#">link 2</a> 
    <a id="content-3" href="#">link 3</a> 
</div> 

jQuery的

$('.switch-content a').on("click", function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     $id = $this.attr('id'), 
     $class = '.' + $('.show-' + $id).attr('class').replace('hidden', ''); 

    $('.show-' + $id).removeClass('hidden'); 
    $('.show-' + $id).addClass('animated fadeIn'); 
    $('div[class*=show]').not($class).addClass('hidden'); 
    $('div[class*=show]').not($class).removeClass('animated fadeIn'); 
});  

CSS

.hidden {display:none} 

使用上面的代碼，如果我點擊鏈接2，內容2將顯示 - 這很好。

但再次單擊鏈接2將隱藏內容2並且不會顯示任何內容。有沒有辦法阻止第二次點擊或繼續顯示內容2無論點擊鏈接2多少次？

Answer 1

您可以使用「數據」來防止再次點擊。

$('.switch-content a').on("click", function(e) { 
    e.preventDefault(); 

    if ($(this).data('clicked')) return; 

    var $this = $(this), 
     $id = $this.attr('id'), 
     $class = '.' + $('.show-' + $id).attr('class').replace('hidden', ''); 

    $('.show-' + $id).removeClass('hidden'); 
    $('.show-' + $id).addClass('animated fadeIn'); 
    $('div[class*=show]').not($class).addClass('hidden'); 
    $('div[class*=show]').not($class).removeClass('animated fadeIn'); 

    $(this).data('clicked', true); 
}); 

Answer 2

我會用一個jQuery對象，而不是它的類，以避免任何問題：

$('.switch-content a').on("click", function(e) { 
    e.preventDefault(); 
    var $content = $('.show-' + $(this).attr('id')); 

    $content.removeClass('hidden').addClass('animated fadeIn'); 
    $('div[class^=show]').not($content).addClass('hidden').removeClass('animated fadeIn'); 
});  

Answer 3

檢查，看是否有內容的hidden類，如果它不要去碰它：

$('.switch-content a').on("click", function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     id = $this.attr('id'), 
     $content = $('.show-' + id); 

    if (!$content.hasClass('hidden')) return; 

    $content.removeClass('hidden').addClass('animated fadeIn'); 
    $('div[class*=show]').not($content).addClass('hidden'); 
    $('div[class*=show]').not($content).removeClass('animated fadeIn'); 
}); 

http://jsfiddle.net/nrtxtufz/