0

このサイトのページから1つの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;
            };
        }
    }
})();

助けてくれてありがとう！

4

1 に答える 1

3

ID を削除した場合:

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

2 行目はエラーを返すため、JavaScript コードは評価されません。

于 2013-01-18T19:32:43.437 に答える