Question

jQuery给了我这个错误

未捕获的TypeError：无法调用未定义的方法'toLowerCase'

我在输入时添加了这个按键事件处理程序后就开始出现了。输入正从div切换到文本字段，但每当我这样做时，我都会调用我的bindHandlers函数。

以下是整个代码：

Date.prototype.getWeek = function() {
    var onejan = new Date(this.getFullYear(),0,1);
    return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}

function leadingZero(num) {

    return num < 10 ? '0'+num:num;

}
function bindHandlers() {

    $('div.city').click(function() {

        $(this).replaceWith('<input type="text" class="city input" value="'+$(this).text()+'" />');
        bindHandlers();

    });

    $('.city.input').blur(function() { changeCity(); });

    $('.city.input').keypress(function(e) { if(e.keyCode == 13) changeCity(); });

}

function changeCity() {

    clearTimeout(weatherTimeout);
    window.city = $(this).val();
    $(this).replaceWith('<div class="city">'+window.city+'</div>');
    bindHandlers();

}

function loadWeatherData(city) {

    $.getScript('http://api.openweathermap.org/data/2.5/weather?q='+city+'&callback=updateWeather&units=metric');
    console.log('Getting weather for city "'+city+'"');
}

function updateTime() {

    var d = new Date(),
    hours = leadingZero(d.getHours()),
    minutes = leadingZero(d.getMinutes()),
    seconds = leadingZero(d.getSeconds()),
    week = leadingZero(d.getWeek()),
    date = leadingZero(d.getDate()),
    month = leadingZero(d.getMonth()+1),
    year = d.getFullYear().toString().substring(2),
    dateString = '<div>'+hours+':'+minutes+':'+seconds+'<br />w'+week+' '+date+'-'+month+'-'+year+'</div>';

    $('.date').html(dateString);

    setTimeout(updateTime, 1000);
}

function updateWeather(data) {
    console.log(data);

    $('.weather').fadeOut(function() {

        $('.temp').html(data.main.temp+'&deg;');
        $('.humid').html(data.main.humidity+'%');

        for(var i = 0; i < data.weather.length; i++) {

            function wIcon(data) {
                switch(data) {

                    case 'Clear':
                        return '&ograve;';
                    break;

                    case 'Drizzle':
                    case 'Rain':
                        return '&otilde;';
                    break;

                    case 'Thunderstorm':
                        return '&uacute;';
                    break;

                    case 'Snow':
                        return '&ucirc;';
                    break;

                    case 'Clouds':
                        return '&ouml;';
                    break;

                }
            };
            var icon = wIcon(data.weather[i].main);

            console.log(icon);
            $('.weather-icon').html('');
            $('.weather-icon').append('<i data-icon="'+icon+'" title="'+data.weather[i].description+'"></i>')
            $('.wind-speed').html(data.wind.speed+' m/s');
        }

        weatherTimeout = setTimeout(function() {
            loadWeatherData();
        }, 30 * 1000);

        $(this).fadeIn(function() { $('.wind-deg').rotate(data.wind.deg); });

    });
}

$(function() {

    var city = 'Roskilde', weatherTimeout;

    loadWeatherData(city);
    updateTime();
    bindHandlers();

});

Answer 1

Aah ..发现了这个问题，因为我都有blur和keypress，我为他们创建了一个函数所以我的代码没有重复，当我创建函数时，我忘记了解析$（this）到函数，所以它不知道$（this）的意思。代码现在如下：

function bindHandlers() {

    $('div.city').click(function() {

        $(this).replaceWith('<input type="text" class="city input" value="'+$(this).text()+'" />');
        bindHandlers();

    });

    $('.city.input').blur(function() { changeCity(this); });

    $('.city.input').keypress(function(e) { if(e.keyCode == 13) changeCity(this); });

}

function changeCity(el) {

    window.city = $(el).val();
    $(el).replaceWith('<div class="city">'+window.city+'</div>');

    clearTimeout(weatherTimeout);
    loadWeatherData(window.city);
    localStorage.setItem('city', window.city);

    bindHandlers();

}

结论：将代码移动到函数中时，请确保该函数仍然从前一个位置获取因变量。

Chrome throw Uncaught TypeError：使用e.keyCode时无法调用undefined方法'toLowerCase'

1 个答案: