删除 id 正在杀死页面上的所有 javascript

Question

我正在尝试从this 网站上的页面中删除一个 javascript 效果。每次我尝试删除 id 导致它杀死整个页面上的所有 js 的效果。我什至尝试在 js 文件中删除对 id 的引用，但这也杀死了页面上的所有 js。

我不想编辑js文件中的函数，因为我想在其他页面上保留js效果。

这是基本的 HTML：

        <div class="large-image" id="large-image">
            <img src="{{ product.images.first | product_img_url: 'large' }}" class="image-zoom" alt="Picture of {{ product.title | escape }}">
        </div>

如果我删除 id="large-image" 页面上的所有 js 将停止工作。

这是完整的 HTML（它使用的是液体模板引擎）：

{% if product.images != nil %}
    <div class="half left product-images">
        <div class="large-image" id="large-image">
            {% if product.compare_at_price_max > product.price %}<span class="sale-banner">Sale</span>{% endif %}
            <img src="{{ product.images.first | product_img_url: 'large' }}" class="image-zoom" alt="Picture of {{ product.title | escape }}">
        </div>

这里是相关的js：

(function() {
        if (document.getElementById('product')) {
            var p = document.getElementById('product'),
                b = document.getElementById('large-image'),
                i = b.getElementsByTagName('img')[0],
                l = document.getElementById('product-image-list');

这是完整的功能：

(function() {
    if (document.getElementById('product')) {
        var p = document.getElementById('product'),
            b = document.getElementById('large-image'),
            i = b.getElementsByTagName('img')[0],
            l = document.getElementById('product-image-list');
            if (l) {
                var a = l.getElementsByTagName('a');
            }

        i.onload = function(e) {
            var p = this.parentNode;
            p.className = p.className.replace(' loading', '');
        };

        if (window.innerWidth && window.innerWidth > 640) {
            var s = document.createElement('span');
            s.className = 'enlarge-icon';
            s.innerHTML = 'View Large Image';
            b.appendChild(s);
            b.className += ' action';
            b.onclick = function(e) {
                e = e || window.event; e = e.target || e.srcElement;
                e = getParentByTagName(e, 'DIV');
                if (e) {
                    if (p.className.indexOf('enlarged') !== -1) {
                        e.className += ' loading';
                        p.className = p.className.replace(' enlarged', '');
                        i.src = i.src.replace('grande', 'large');
                        s.innerHTML = 'View Large Image';
                    } else {
                        e.className += ' loading';
                        i.src = i.src.replace('large', 'grande');
                        p.className += ' enlarged';
                        s.innerHTML = 'View Smaller Image';
                    }
                }
            }
        }

        if (l) {
            l.onclick = function(e) {
                e = e || window.event; e = e.target || e.srcElement;
                e = getParentByTagName(e, 'A');
                if (e && e.className != 'current') {
                    b.className += ' loading';
                    var u = e.href;
                    if (p.className.indexOf('enlarged') === -1) {
                        u = u.replace('grande', 'large');
                    }
                    i.src = u;
                    for (var j=0; j<a.length; j++) {
                        if (a[j].className.indexOf('current') != -1) {
                            a[j].className = a[j].className.replace('current', '');
                        }
                    }
                    e.className = 'current';
                }
                return false;
            };
        }
    }
})();

感谢您的帮助！

Answer 1

如果你删除了 id：

b = document.getElementById('large-image'); // will return "undefined"
i = b.getElementsByTagName('img')[0];       // will return an error

第二行将返回错误，因此不会评估 javascript 代码。