删除id会杀死页面上的所有javascript
Removing an id is killing all javascript on page
我试图从这个网站的页面上删除一个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代码将不会被求值。
相关文章:
- Javascript-ID冲突的几率
- 使用javascript+id将用户直接引导到php页面
- 在新窗口上打开Javascript Id
- JavaScript id 选择器不起作用?不知道出了什么问题
- JavaScript id + class vs. class selector performance
- Javascript id 作为 href 中的参数
- 在循环中生成 Javascript id
- Javascript ID groupings
- jQuery and javascript ('#ID') #update1#helpme
- jQuery全局函数和Javascript.id方法
- 两个不同元素的JavaScript ID作为同一函数工作
- 如何在javascript id选择器中使用if条件.我不想运行'window.addeventlistener
- XSL“for-each"使用Javascript ID不输出任何东西
- Javascript id question
- javascript ID selector
- javascript id select
- Javascript-Id值递增行不起作用并按Id删除行
- JavaScript id输出只显示一秒钟,然后消失
- JavaScript Id Handling
- JavaScript ID标签选择