2015-10-04 193 views
2

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

我不明白我在做什么错。为了展示一下我说的,我包括我的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

+0

添加了代码链接 – Leb

回答

1

.name不会出现定义的,以DOM时调用的$(".name").text(value)字符串参数内.text()至 。 append()

尝试在字符串参数中设置value.append()使用+运算符例如<span class=\"name\">'+value;在click事件中移动value变量声明以便在事件中定义它; js初始codepen设置valueaddItem()最初称在.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(''); 
    }); 
} 

codepen尚未设置http://codepen.io/anon/pen/NGpBBX

+0

我试过了。它没有工作。 –

+0

@ J.鲍尔可以描述_“它没有工作。”_?看到更新的codepen http://codepen.io/anon/pen/NGpBBX,尝试在“Add Item Here”处点击“abc”,点击“Add New List Item” – guest271314

+0

哦,我明白你做了什么!谢谢! –

0

的答案考虑您可能需要使用不止一种形式入境解析将整个表单内容转换为一个键值对列表,以便轻松访问它。

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(''); 
    }); 
}