2012-01-15 78 views
0

我有一類「卡」的,這也是可拖動(一個div)一些文本。我正在使用localstorage來存儲包含卡片信息的數組。使用HTML5 localStorage的更新,而不使用jQuery文件撰寫

var cardID = 1; 
var cardValues = new Array(); 
var name = "Shifting Sliver"; 
var cost = "3U"; 
var text = "Sliver cannot be blocked except by slivers."; 
var power = "2"; 
var toughness = "2"; 

cardValues.push(name); 
cardValues.push(cost); 
cardValues.push(text); 
cardValues.push(power); 
cardValues.push(toughness); 

localStorage.setItem(cardID, cardValues.join(";")); 


var cardKey = localStorage.key(0); 
var getCardValues = localStorage.getItem(cardKey); 
values = getCardValues.split(";"); 
var name = values[0]; 
var cost = values[1]; 
var text = values[2]; 
var power = values[3]; 
var toughness = values[4]; 

function writeCard() 
{ 
    document.write('Card Name: ' + name + '<br />'); 
    document.write('Card Cost: ' + cost + '<br />'); 
    document.write('Card Text: ' + text + '<br />'); 
    document.write('Card Power: ' + power + '<br />'); 
    document.write('Card Toughness: ' + toughness); 
} 

在HTML:

<div class="card"> 
    <div class="info"><script type='text/javascript'> writeCard(); </script></div> 
</div> 

拖動卡後,鬆開鼠標時,文件撰寫導致整個頁面刷新,僅在文件撰寫的數據顯示。如何在不使用document.write的情況下將數據插入到卡上?

我想我需要使用DOM操作,但我有點究竟是如何被困在。

+0

你爲什麼不使用['document.innerHTML = '東西','](HTTP:// jsfiddle.net/B7aZc/)?在我看來,你正在使用舊的('document.write')方法和新技術,沒有任何特殊的原因。此外,我會傳入'writeCard()'變量值,而不是全局值。 – 2012-01-15 20:07:07

+0

又如:http://jsfiddle.net/B7aZc/2/ – 2012-01-15 20:15:49

+0

和一些標稱的DOM操作:http://jsfiddle.net/B7aZc/3/ – 2012-01-15 20:22:27

回答

1

不能使用document.write當文件裝載完成使用innerHTML代替 YPU也可以使用jQuery.append