如何使span class不可見，直到它被觸發？

Question

我在一個「li」標記中做了兩個span類，我希望他們在按下按鈕時切換，我得到的問題是他們都出現了，而我的JS不工作，我檢查了我的js上的jsfiddle但也有出現

這裏沒有錯誤的fiddle

$(document).ready(function() { 
$(".smiley").click(function() { 


    if ($('button').clicked) { 
     $('.off').css('display' ,'true'); 
     $('.on').css('display', 'none'); 
    } else { 
     $('.off').css('display', 'none'); 
    } 
}); 

}）;

Answer 1

在jQuery中您可以使用.toggle()

以下是錯誤在你的提琴：

（1）你錯過了添加jQuery庫可在左的jsfiddle頂部。

（2）有沒有像display: off改用display: none

$('.off').css('display' ,'off'); //wrong 

（3）有沒有在你的代碼中調用.smiley類。

$(".smiley").click(function() { //wrong and unnecessary 

（4）沒有像這樣可用

if ($('button').clicked) { //wrong and unnecessary 

（5）您需要了解更多關於選擇MDN

我已經調整你的代碼像下面

$(document).ready(function() { 
    $("button").on('click', function() { 
     $('.toggle').toggle(); 
    }); 
}); 

Working fiddle

Answer 2

檢查此琴：

JSFIDDLE

您不包括jQuery和你的劇本是所有janky。我在閱讀完您的問題後，將其清理成我認爲您想要的內容。

JS

$(document).ready(function(){ 

    $('button').click(function() { 
     $('.switching_spans').toggleClass('on'); 
    }); 

}); 

HTML

<div id="fiddle"> 
    <span class="switching_spans">1</span> 
    <span class="switching_spans on">!</span> 
</div> 

CSS

.switching_spans { 
    width:30px; 
    height:30px; 
    background:blue; 
} 
.on{ 
    background:green; 
}