點擊開關課程

嗨我有一個關於簡單的Javascript功能的問題。下面是代碼，它很容易看到，當用戶點擊點擊按鈕我想切換類時，我的意思是當頁面加載「這是段」需要顯示，然後當用戶點擊點擊按鈕文本需要改變這已更新。但不知道爲什麼它不工作。點擊開關課程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>untitled</title> 
    <script type="text/javascript" src="jquery.js"></script> 
    <style type="text/css"> 
    .none { 
    display: none; 
    } 
.display1 { 
    display: block; 
} 
    </style> 
</head> 
<body> 
<p id="default">This is para</p> 
<p id="updated" style="display:none">This is updated</p> 
<p><input type="button" value="Click" id="button1" /></p> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#button1").click(function(){ 
    $("#default").addClass("none"); 
    $("#updated").addClass("display1"); 
}); 

}); 
</script> 
</body> 
</html>

來源

2010-11-10 Jay

你爲什麼不使用jQuery的show（）和hide（）函數？ – ceejayoz 2010-11-10 21:15:39

我可以但只是想清除我關於jquery.addclass的概念。 – Jay 2010-11-10 21:16:40

@add class和remove class主要用於在運行時應用css屬性，用於顯示和關閉您應該使用其他人提到的 – kobe 2010-11-10 21:18:32

你爲什麼不只是使用show()和hide()？

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#button1").click(function(){ 
    $("#default").hide(); 
    $("#updated").show(); 
}); 

}); 
</script>

如果你只是想改變的不是有兩個元素的文字，爲什麼不刪除updated元素，並使用.text()，像這樣：

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#button1").click(function(){ 
    $("#default").text("This is updated"); 
}); 

}); 
</script>

來源

2010-11-10 21:16:28

如果因爲某些原因需要類，它不起作用，因爲他沒有擺脫style =「display：none;」在第二個（您的代碼將修復）。所以我建議OP使用你的代碼或者如果他需要類，改變'$（「＃updated」）。addClass（「display1」）;'to'$（「＃updated」）。show（）。addClass（「display1」）;'但當然，如果這個類的全部目的都是爲了顯示段落，那麼使用類就沒有意義了。對不起，漫不經心。 :) – 2010-11-10 21:19:35

@Andrew我不認爲用這種方式使用類沒有意義 - 這是一個完美的方法。但是，他當然不應該混搭！ – Pointy 2010-11-10 21:21:43

@Pointy好吧，我認爲這是唯一的功能，show（）＆hide（）是專門爲此目的而製作的。 – 2010-11-10 21:27:08

而是執行此操作：

$("#default").hide(); 
$("#updated").show();

你可以擺脫none和display1類。

發生在你身上的是style="display:none"優先於一個類，所以它永遠不會顯示。

來源

2010-11-10 21:17:53 cambraca

但我不希望#updated在頁面加載時第一次顯示。 – Jay 2010-11-10 21:29:46

您可以將＃style =「display：hidden;」'添加到#updated元素。 'show（）'仍然可以工作 – cambraca 2010-11-10 22:01:03

您的「addClass」調用（可能）正在工作，但直接在元素上的樣式勝過CSS提供的樣式。

我個人認爲寧願通過改變「class」類似的值來做這樣的事情，但是你不能真正地混合和匹配這兩種方法。（嗯，你可以，但它很容易混淆，並且容易出錯。）而不是用這種風格開始你的元素，而是把它改爲你的「無」類。

來源

2010-11-10 21:17:58 Pointy

點擊開關課程

回答

相關問題