2015-10-04 29 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(''); 
    }); 
}