2011-05-19 174 views
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> 
+0

哪裏是

0

在js文件中分配你的事件處理程序

element.onclick = function(){ 
    activeproduct=1; 
}; 

這將是一個更好的風格(不顯眼的JavaScript),因爲JS從HTML分離。

+1

這與已發佈的內容在功能上有何不同? – Matt 2011-05-19 13:48:32

+0

我想你的意思是'onclick = function'不是'onclick - function' – herostwist 2011-05-19 13:49:16

+0

@Matt他可以將它包裝在一個window.onload事件 – chchrist 2011-05-19 13:51:10