jQuery簡單動畫不起作用
[英]JQuery simple animation not working
問題描述
我一直在嘗試使用jQuery創建一個簡單的動畫，唯一的問題是，無論我嘗試過什么，它似乎都無法正常工作。 我要做的就是創建一個“顯示/隱藏”按鈕，先顯示然后隱藏一個句子。 我只是兩天前才開始學習jQuery，所以可能有一個簡單的錯誤。
這是我的代碼：
<body>
<input type="button" value="Hide" id="toggle_message" />
<p id="message">You can see this</p>
<script type="text/javascript" src="JQuery\jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="JQuery\toggle.js"></script>
</body>
由此，您可以看到我已經從計算機上導入了jQuery庫，並嘗試使用具有顯示/隱藏代碼的第二個腳本。
這也是：
$('toggle_message').click(function() {
var value = $('#toggle_message').attr('value');
$('message').toggle('fast');
if (value == 'Hide') {
$('toggle_message').attr('value', 'Show');
} else if (value == 'Show') {
$('toggle_message').attr('value', 'Hide');
}
});
即使將其保存為.js文件，也似乎沒有文本會像HTML一樣改變顏色。 有人可以澄清這是否應該發生。 如果有幫助，我目前正在使用Notepad ++。
3 個解決方案
解決方案1
2 2016-01-10 02:20:08
您的選擇器語法略有錯誤，您可以稍微簡化一下代碼。
$('#toggle_message').click(function() {
$('#message').toggle('fast');
if ($(this).val() == 'Hide') {
$(this).val('Show');
} else {
$(this).val('Hide');
}
}
當按ID或進行選擇時，jQuery中的選擇器通常使用# . 按班級選擇時。
在函數內部，因為正在#toggle_message元素上調用它，所以可以簡單地將其引用為$(this) 。
解決方案2
0 2016-01-10 02:09:54
您的選擇器不正確。 jQuery使用CSS樣式選擇器，因此在嘗試使用具有id屬性的項目時，您需要執行“ #toggle_message”和“ #message”之類的操作。
解決方案3
0 2016-01-10 02:19:08
如前所述，這是您需要的代碼。唯一的問題是引用ids時缺少#
$('#toggle_message').click(function() {
var value = $('#toggle_message').attr('value');
$('#message').toggle('fast');
if (value == 'Hide') {
$('#toggle_message').attr('value', 'Show');
} else if (value == 'Show') {
$('#toggle_message').attr('value', 'Hide');
}
});
簡單的 jQuery animation 不工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.