JQuery removeClass在與addClass配對時不工作

Question

我有一個按鈕和一些文本。當我點擊我想要的文字被隱藏的按鈕和不同的文本行要顯示：

<button type="button" id=button>Click Me!</button> 

<div id="a"> 
This is a line of text 

<div id ="b" class="hidden"> 
This is also a line of text 

的Jquery：

$("#button").click(function() { 
    $('#b').removeClass('hidden'); 
    $('#a').addClass('hidden');  
}); 

然而，它只是隱藏文字和沒有按」原線t顯示第二行。但是當我這樣做時：

$("#button").click(function() { 
    $('#b').removeClass('hidden'); 
    // $('#a').addClass('hidden'); 
    }); 

顯示兩行文本。只有當我將兩條線加在一起時，問題就出現了。

Answer 1

您還未正確關閉div。

$("#button").click(function() { 
 
    $('#b').removeClass('hidden'); 
 
    $('#a').addClass('hidden');  
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id=button>Click Me!</button> 
 
<div id="a"> 
 
This is a line of text 
 
</div> 
 

 
<div id ="b" class="hidden"> 
 
This is also a line of text 
 
</div>

Answer 2

你可以直接使用jQuery的隱藏和顯示方法

$('#b').hide(); 
 
$("#button").click(function() { 
 
    $('#b').show(); 
 
    $('#a').hide();  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id=button>Click Me!</button> 
 
<div id="a"> 
 
This is a line of text 
 
</div> 
 

 
<div id ="b" > 
 
This is also a line of text 
 
</div>

Answer 3

你錯過關閉div標籤。

$("#button").click(function() { 
 
    $('#b').removeClass('hidden'); 
 
    $('#a').addClass('hidden');  
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 

 
<button type="button" id=button>Click Me!</button> 
 
<div id="a"> 
 
    This is a line of text 
 
</div> 
 
<div id="b" class="hidden"> 
 
    This is also a line of text 
 
</div>