$（this）.addClass不起作用
[英]$(this).addClass is not working
問題描述
在學習教程時，我看到樣式表未應用於列表中的單擊元素。 可能是什么原因？
如果將一些字符串添加到文本框中，然后單擊按鈕，則下面的示例以這種方式工作，一個新項目被添加到列表中。 如果單擊列表中的項目，則應將其選中。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#taskText').keydown(function (evt) {
if (evt.keyCode == 13) {
addTask(this, evt);
}
});
$('#addTask').click(function (evt) {
addTask(document.getElementById('taskText'), evt);
});
// following statements not working
$('#tasks li').live('click', function(evt) {
$(this).addClass('done');
});});
function addTask(textBox, evt) {
evt.preventDefault();
var taskText = textBox.value;
$('<li>').text(taskText).appendTo('#tasks');
textBox.value = "";
};
</script>
<style type="text/css">
.done{
text-decoration:line-through;
}
</style>
</head>
<body>
<ul id="tasks">
</ul>
<input type="text" id="taskText" />
<input type="submit" id="addTask"/>
</body>
</html>
4 個解決方案
解決方案1
1 2016-01-11 02:25:36
live()函數已在jQuery 1.7中刪除，在jQuery 2.x中根本不存在。
如果檢查瀏覽器的開發人員控制台，則可能會在這些行中看到錯誤消息。
解決方案2
0 2016-01-11 02:33:23
$(document).ready(function() { $('#addTask').click(function() { var taskText = $('#taskText').val(); var li = $('<li>' + taskText + '</li>'); $('ul#tasks').append(li); $('#taskText').val(''); $(li).click(function() { $(this).toggleClass('done'); }); }); });
li { font-family: arial; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } .done{ text-decoration: line-through; color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <ul id="tasks"> <!-- List Goes Here... --> </ul> <!-- Textbox / Input Buttons --> <input type="text" id="taskText" /> <input type="submit" id="addTask"/> </body> </html>
解決方案3
0 2016-01-11 02:43:42
$('#tasks li').click(function(){
$(this).addClass('class-name');
};
應該管用。 檢查並確保所有語法正確（即沒有隨機分號）
解決方案4
0 已采納 2016-01-11 02:57:58
正如ceejayoz提到的。 live()函數已在jQuery 1.7中刪除，在jQuery 2.x中根本不存在。
可以在以下問題上更好地解釋您單擊列表不起作用的原因： 使用jquery動態生成的列表項的click事件
這是代碼對您的外觀
$(document).ready(function() { $('#taskText').keydown(function(evt) { if (evt.keyCode == 13) { addTask(this, evt); } }); $('#addTask').click(function(evt) { addTask($('#taskText'), evt); }); $('#tasks').on('click', 'li', function(evt) { $(this).addClass('done'); }); }); function addTask(textBox, evt) { evt.preventDefault(); var taskText = textBox.val(); $('<li>').text(taskText).appendTo('#tasks'); textBox.val(""); };
.done { text-decoration: line-through; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="tasks"> </ul> <input type="text" id="taskText" /> <input type="submit" id="addTask" />
$（this）.addClass（）不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.