.text() 返回对象 Object答案

【问题标题】：.text() returns object Object.text() 返回对象 Object
【发布时间】：2015-10-04 00:59:10
【问题描述】：

所以我创建了一个简单的购物清单/待办事项应用程序。它几乎完成了，除了一个烦人的问题：.text() 不断返回 [object Object] 而不是捕获的输入。

我不明白我做错了什么。为了说明我在说什么，我包含了我的 JS 脚本：

 $(document).ready(function() {

     addItem();
     deleteAction();
     doneAction();
 });

 function addItem() {

     $("button").click(function() {
     var value = $(".input-form").val();       
         $("ul").append('<li> <span class=\"item-name\">'+value+'</span><span class=\"done\"> done</span><span class=\"delete\"> delete</span></li>');
         $(".input-form").val('');
     });
 }

 function deleteAction() {
     $(".ul-list").on("click", ".delete", function() {
      //   alert("Delete event fired.");
         $(this).closest("li").remove();
     });
 }

 function doneAction() {
     $(".ul-list").on("click", ".done", function() {
      //   alert("Done event fired.")
         $(this).closest("li").toggleClass("strike");
     });
 }

这是我在 CodePen 上的完整代码：http://codepen.io/barackobama/pen/qOrKBp

【问题讨论】：

从链接添加代码

标签： jquery function text input

【解决方案1】：

.name 未定义，当 .text() 在 .append() 的字符串参数中调用 $(".name").text(value) 时附加到 DOM ？

尝试使用+ 运算符将字符串参数中的value 设置为.append()，例如<span class=\"name\">'+value；在click 事件中移动value 变量声明以对其进行定义，在事件中设置； js 在初始 codepen 设置 value 当 addItem() 最初在 .ready() 调用时，当用户尚未设置任何值时

 function addItem() {         
     $("button").click(function() {
         var value = $(".input-form").val();
         $("ul").append('<li> <span class=\"name\">'+value
           +'</span><span class=\"done\"> done</span>'
           +'<span class=\"delete\"> delete</span></li>');
         $(".input-form").val('');
     });
 }

codepenhttp://codepen.io/anon/pen/NGpBBX

【讨论】：

@J.Bauer 可以描述 “它没有用。” ?查看更新的 codepen codepen.io/anon/pen/NGpBBX ，尝试在“Add Item Here”处输入“abc”，点击“Add New List Item”

【解决方案2】：

考虑到您可能希望使用多个表单条目将整个表单内容解析为键值对列表以便于访问它的答案。

function addItem() {
     $("button").click(function() {
         var data = $('.input-form').serializeArray().reduce(function(obj,item) {                
                obj[item.name] = item.value;
                return obj;
              }, {});
         $("ul").append('<li> <span class=\"name\"></span>'+data['additem']+
                    '<span class=\"done\"> done</span><span class=\"delete\"> delete</span></li>');
         $(".input-form").val('');
     });
}

【讨论】：