1
我正在爲使用移動瀏覽器的jQTouch編寫HTML5應用程序。JavaScript變量未定義
我用這樣的代碼設置變量:
var activeproduct; // globally in js file
然後,我有一個ul li
那臺varialbe像這樣:
<li class="arrow" onclick="activeproduct=1;">
<a href="#productClickThru">Product</a>
</li>
這適用於FF正常,但當我嘗試它在iPhone的Safari上,當我嘗試在函數內部使用activeproduct時,出現未定義的錯誤。我是不是正確設置var
?最受讚賞的任何幫助。
比利
由於這裏要求是更多的代碼(請注意,所有列表項將被動態地生成最終):
我的JavaScript文件:
var jQT = new $.jQTouch({
statusBar: 'black'
});
var activeproduct;
var activeroom;
var activearea;
var last_hash;
$(function(){
$(window).bind('hashchange',
function(){
console.log('unloading ' + last_hash);
$(window).trigger('unload' + last_hash);
last_hash = location.hash;
console.log('loading ' + location.hash);
$(window).trigger('load' + location.hash);
});
$(window).bind('unload#productsMenu', function() {
$('#productsMenuContent > *').remove();
});
$(window).bind('load#productsMenu',
function() {
console.log('Products menu loaded');
$('<li class="arrow" onclick="activeproduct=1;"><a href="#productClickThru">Strip</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow "onclick="activeproduct=2;"><a href="#productClickThru">Prep</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow" onclick="activeproduct=3;"><a href="#productClickThru">Heavy Prep</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow" onclick="activeproduct=4;"><a href="#productClickThru">Line</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow" onclick="activeproduct=5;"><a href="#productClickThru">Finished Paper</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow" onclick="activeproduct=6;"><a href="#productClickThru">Emulsion</a></li>').appendTo($('#productsMenuContent'));
$('<li class="arrow" onclick="activeproduct=7;"><a href="#productClickThru">Satin</a></li>').appendTo($('#productsMenuContent'));
});
$(window).bind('load#productClickThru',
function() {
alert(activeproduct);
console.log('Room: '+activeroom);
console.log('Area: '+activearea);
console.log('Product: '+activeproduct);
if(activeproduct == 1) {
$('#productClickThru > .toolbar > :header').html('Strip');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 2) {
$('#productClickThru > .toolbar > :header').html('Prep');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 3) {
$('#productClickThru > .toolbar > :header').html('Heavy Prep');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 4) {
$('#productClickThru > .toolbar > :header').html('Line');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 5) {
$('#productClickThru > .toolbar > :header').html('Finished Paper');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 6) {
$('#productClickThru > .toolbar > :header').html('Emulsion');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
} else if(activeproduct == 7) {
$('#productClickThru > .toolbar > :header').html('Satin');
$('#productClickThru').find('.room-label').html('Room: '+activeroom);
$('#productClickThru').find('.area-label').html('Area: '+activearea);
}
});
});
index.php文件:
<div id="productClickThru" class="page">
<div class="toolbar"><h1 name="title"></h1>
<a class="back button" href="#">Back</a>
</div>
<ul>
<li><span class="room-label"></span></li> //gets set by JS
<li><span class="area-label"></span></li> //gets set by JS
<li>
<select id="quantity">
<optgroup label="quantity">
<option value ="10">10</option>
<option value ="20">20</option>
<option value ="20">30</option>
<option value ="20">40</option>
<option value ="20">50</option>
<option value ="20">60</option>
<option value ="20">70</option>
<option value ="20">80</option>
<option value ="20">90</option>
<option value ="20">100</option>
<option value ="20">150</option>
</optgroup>
</select>
</li>
<li><textarea placeholder="Notes" ></textarea></li>
</ul>
<a href="#" class="submit whiteButton">Save</a>
<!-- #new-quote close -->
</div>
哪裏是
在js文件中分配你的事件處理程序
這將是一個更好的風格(不顯眼的JavaScript),因爲JS從HTML分離。
來源
2011-05-19 13:46:58 Headshota
這與已發佈的內容在功能上有何不同? – Matt 2011-05-19 13:48:32
我想你的意思是'onclick = function'不是'onclick - function' – herostwist 2011-05-19 13:49:16
@Matt他可以將它包裝在一個window.onload事件 – chchrist 2011-05-19 13:51:10