JavaScript getElementById 在手机上不起作用答案

【问题标题】：JavaScript getElementById not working on mobilephoneJavaScript getElementById 在手机上不起作用
【发布时间】：2020-02-21 22:14:40
【问题描述】：

我正在创建一个包含一些 JavaScript 代码的网站。 JavaScript 的所有内容都可以在计算机上正常运行。但在我的 iPhone 7 上，getElementById 函数不起作用。我尝试设置 img 标签的来源，但没有任何反应。

JavaScript：

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;

$(window).on('scroll', onScroll); 
function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        document.getElementById("headerLogo").src = "images/logo-black.png";


    } else {
        header_bar.removeClass("sticky");
        document.getElementById('headerLogo').src = "images/logo-white.png";
    }
}

该功能应该在网站顶部添加一个黑色徽标，如果我滚动一个白色徽标。在电脑上可以，但在我的智能手机上不行。

HTML：

<header class="header header-mobile js-header-bar-mobile d-md-none">
    <div class="header-bar">
        <div class="header-bar-logo">
            <a href="index.html">
                <img class="originalTest" alt='Auto mit Schriftzug: "Autohandel-ZAR"' id="headerLogo" src="images/logo-white.png"/>
            </a>
        </div>
        <div class="header-bar-menu">
            <button class="navbar-toggler hamburger" type="button" id="js-header-toggle">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>

提前谢谢你。

【问题讨论】：

也许可以尝试使用 jQuery $("#headerLogo").attr("src", "your/path");
@StanFortońskiDeveloper 谢谢。但它仍然无法正常工作......
我认为您的网站已被缓存或您的 JavaScript 文件已保存在缓存中。尝试从手机中的网络浏览器中删除缓存。
@StanFortońskiDeveloper 不起作用。我认为问题是在没有设置图像源的 ID 的情况下获取元素。因为我可以添加新的类，但 ID 的东西不起作用
@StanFortońskiDeveloper 它工作现在我只是尝试使用 jQuery 按类获取元素，现在工作正常。所以问题出在 ID 部分。

标签： javascript html mobile getelementbyid

【解决方案1】：

为移动设备添加额外的事件监听器：

$(document.body).on('touchmove', onScroll);

所以完整的代码应该是这样的：

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;

$(document.body).on('touchmove', onScroll);
$(window).on('scroll', onScroll); 
function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        document.getElementById("headerLogo").src = "images/logo-black.png";


    } else {
        header_bar.removeClass("sticky");
        document.getElementById('headerLogo').src = "images/logo-white.png";
    }
}

【讨论】：

谢谢你，但它仍然不起作用。 addClass 部分也可以在没有额外的事件监听器的情况下工作。

【解决方案2】：

我解决了这个问题，方法是通过类而不是 Id 使用 jQuery 获取元素所以问题是 Id 部分。

工作代码：

function onScroll(){
    if ($(this).scrollTop() > header_bar_offsetTop){
        header_bar.addClass("sticky");
        $(".logoHeader").attr("src", "images/logo-black.png");


    } else {
        header_bar.removeClass("sticky");
        $(".logoHeader").attr("src", "images/logo-white.png");
    }
}

【讨论】：