Question

我正在处理一个待办事项列表，您在框中键入任务，然后单击添加按钮将该项目输入列表。但是，没有任何东西被添加到我的列表中，我无法弄清楚我的代码有什么问题。

  $(document).ready( function() {   
  
    $('#add_todo').click( function() {
      var todoDescription = $('#todo_description').val();
      
      $('.todo_list').prepend('<div class="todo">'
         '<div>'
           '<input type="checkbox" class="check_todo" name="check_todo"/>'
         '</div>'
         '<div class="todo_description">'
           todoDescription
         '</div>'
       '</div>');
      
      $('#todo_form')[0].reset();
      
      $('.check_todo').unbind('click');
      $('.check_todo').click( function() {
        var todo = $(this).parent().parent();
        todo.toggleClass('checked');
      });
      return false;
            
    });  
    
    
  });

body {
	font-family: kristen itc;
	background-image="css/fzm-notebook.texture-25.jpg";
	background-repeat: no-repeat;
	background-size: cover;
}

.title {
	text-align: center;
	margin-top:  80px;
	font-size: 40px;

}

.item {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    }

  .dashed{
  	font-size: 25px;
  }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <script src="js/app.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">	
	</head>

    
   <body background="css/fzm-notebook.texture-25.jpg" no-repeat;>
    <div class="title">
        <h1>Shopping List</h1>
   <div class="enter_todo">
        <form id="todo_form" action="index.html" method="POST">
            <input type="text" size="55" id="todo_description" name="todo_description"/>
            <input type="submit" id="add_todo" value="Add"/>
        </form>
   </div>
</div>

   <div class="todo_list">
   </div>
</body>
</html>

Answer 1

JS中不能有多行字符串。你似乎知道这一点，但你忘了用加号连接它们。这是有问题的部分：

Saving Container
Obj Addr: 0x23d2128 
Obj: 0x23d2130 0x23d2134 0x23d2138 // Fields adresses (f1,f2,f3)
Obj:  8 8 128 // Fields values
Saving Obj: 0x23d2128 // Same object
This: 0x23d2118 0x23d211c 0x23d2120 // Different field adresses !
This: 4293296 0 37569440 // Garbage

只需将$('.todo_list').prepend('<div class="todo">' '<div>' '<input type="checkbox" class="check_todo" name="check_todo"/>' '</div>' '<div class="todo_description">' todoDescription '</div>' '</div>');添加到除最后一行之外的每一行的末尾。

除此之外，你的代码看起来很好，让我们试试吧：

$(document).ready( function() {   
  
    $('#add_todo').click( function() {
      var todoDescription = $('#todo_description').val();
      
      $('.todo_list').prepend('<div class="todo">' +
         '<div>' +
           '<input type="checkbox" class="check_todo" name="check_todo"/>' +
         '</div>' +
         '<div class="todo_description">' +
           todoDescription +
         '</div>' +
       '</div>');
      
      $('#todo_form')[0].reset();
      
      $('.check_todo').unbind('click');
      $('.check_todo').click( function() {
        var todo = $(this).parent().parent();
        todo.toggleClass('checked');
      });
      return false;
            
    });  
    
    
  });

body {
	font-family: kristen itc;
	background-image="css/fzm-notebook.texture-25.jpg";
	background-repeat: no-repeat;
	background-size: cover;
}

.title {
	text-align: center;
	margin-top:  80px;
	font-size: 40px;

}

.item {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    }

  .dashed{
  	font-size: 25px;
  }

Answer 2

我让它工作......

以下是您修改的代码：

<script>
$(document).ready( function() {

    $('#add_todo').click( function() {
        var todoDescription = $('#todo_description').val();
        $('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
        $('#todo_form')[0].reset();
        $('.check_todo').unbind('click');
        $('.check_todo').click( function() {
            var todo = $(this).parent().parent();
            todo.toggleClass('checked');
        });
        return false;
    });
});
</script>

我刚删除了$('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');

内html上的所有引号

并添加＆＃34; +＆＃34;周围＆＃34; todoDescription＆＃34;

希望这会有所帮助：）

修改

忘记提及我已在您的表单中删除了您的操作......

<form id="todo_form" method="POST">

Answer 3

检查您的控制台，您忘记了连接html字符串所需的所有http://localhost/subagent/hotel_booking/hotel/search_hotel：

$(document).ready(function() {

	$('#add_todo').click(function() {
		var todoDescription = $('#todo_description').val();

		$('.todo_list').prepend('<div class="todo">'+
		'<div>'+
		'<input type="checkbox" class="check_todo" name="check_todo"/>'+
		'</div>'+
		'<div class="todo_description">'+
		todoDescription +'</div>'+
		'</div>');

		$('#todo_form')[0].reset();

		$('.check_todo').unbind('click');
		$('.check_todo').click(function() {
			var todo = $(this).parent().parent();
			todo.toggleClass('checked');
		});
		return false;

	});


});

Answer 4

正如其他人所说，你没有正确地连接字符串。

多线字符串和字符串插值可以与ES6中引入的模板字符串一起使用。

您可以使用模板字符串以下列方式格式化字符串：

`<div class="todo">
     <div>
     <input type="checkbox" class="check_todo" name="check_todo"/>
     </div>
     <div class="todo_description">
      ${todoDescription}
     </div>
   </div>`

JQuery待办事项列表没有运行

4 个答案:

修改