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

Removing an id is killing all javascript on page

本文关键字:javascript id 删除      更新时间:2023-09-26

我试图从这个网站的页面上删除一个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;
            };
        }
    }
})();

谢谢你的帮助!

如果删除id:

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

第二行将返回一个错误,因此javascript代码将不会被求值。