2016-11-15 22 views
0

JSは、入力された名前とコメントのコメントを保存し、その下のコメントの下にある[コメントを保存]ボタンをクリックすると表示されるようにします。JavaScript - 保存されたコメントを表示すると、名前とコメントは上に表示されず、隣に表示されますか?

それはそれを行いますが、名前とコメントが、それはこのようになり、互いの上に横並びの代わりであり、紛らわしい

// utility functions for localstorage 
function setObject(key, value) { 
    window.localStorage.setItem(key, JSON.stringify(value)); 
} 

function getObject(key) { 
    var storage = window.localStorage, 
     value = storage.getItem(key); 
    return value && JSON.parse(value); 
} 

function clearStorage() { 
    window.localStorage.clear(); 
} 

// Clear inputfields and localstorage 
function clearComment(){ 
    $('#txt1').val(''); 
    $('#namebox').val(''); 
    clearStorage(); 
} 

function saveComment(){ 
    var cText = $('#txt1').val(), 
     cName = $('#namebox').val(), 
     cmtList = getObject('cmtlist'); 

if (cmtList){ 
    cmtList.push({name: cName, text: cText}); 
    setObject('cmtlist', cmtList); 
}else{ //Add a comment 
    setObject('cmtlist', [{name: cName, text: cText}]); 
} 

bindCmt(); 
} 

function bindCmt(){ 
var cmtListElement = $('#cmtlist'), 
    cmtList = getObject('cmtlist'); 

//Out with the old 
cmtListElement.empty(); 
//And in with the new 
$.each(cmtList, function(i, k){ 
    cmtListElement.append($('<p><span>'+ k.name +'</span>'+ k.text +'</p>')); 
    }); 
} 

//Get the comments on page ready 
$(function(){ 
    bindCmt(); 
}); 

に見える:あなたは可能性が

the NameTest and CommentTest are next to each other in the Comments section

+0

おそらく –

+0

の代わりにdivを使用してください。あなたはhtmlとCSSを投稿できますか? – AnilRedshift

答えて

0

下記の行にhtmlの改行<br>を追加してください。

cmtListElement.append($('<p><span>'+ k.name +'</span><br>'+ k.text +'</p>')); 
関連する問題