Переменные JavaScript не определены - PullRequest
Новая
       164

Переменные JavaScript не определены

1 голос
/ 19 мая 2011

Я пишу приложение HTML5 с jQTouch для мобильных браузеров.

Я устанавливаю переменные, используя такой код: 

var activeproduct; // globally in js file

Тогда у меня есть ul li, который устанавливает переменную следующим образом: 

<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>

Ответы [ 2 ]

2 голосов
/ 19 мая 2011

Возможно, вам понадобится обернуть js в самозапускающуюся функцию, например: 

<li class="arrow" onclick="javascript:(function(){activeproduct=1;})()">
    <a href="#productClickThru">Product</a>
</li>
0 голосов
/ 19 мая 2011

Назначьте ваши обработчики событий в js-файле 

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

Это был бы также лучший стиль (ненавязчивый javascript), потому что JS отделен от HTML.

...