DOM对象只需要在Internet Explorer中单击两次
DOM object only requires two clicks in Internet Explorer
我真的很难处理下面的代码。我对将DOM与Javascript结合使用还很陌生,而且这个脚本在FireFox、Chrome和Safari中运行得非常完美。在Internet Explorer中,它需要单击两次。如果你访问FireFox中的链接,然后访问Internet Explorer中的同一链接,你会看到如果你在FireFox上单击一个形状,它会立即显示颜色选项。如果你在Internet Explorer中这样做,它不会显示颜色选项,直到你单击该形状两次,或者单击一个图形,然后单击另一个图形。IE、DOM、Javascript Ninja能告诉我导致在IE中需要双击的脚本出了什么问题吗?
<?php
$swatches = $this->get_option_swatches();
?>
<script type="text/javascript">
document.observe('dom:loaded', function() {
try {
var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;
function find_swatch(key, value) {
for (var i in swatches) {
if (swatches[i].key == key && swatches[i].value == value)
return swatches[i];
}
return null;
}
function has_swatch_key(key) {
for (var i in swatches) {
if (swatches[i].key == key)
return true;
}
return false;
}
function create_swatches(label, select) {
// create swatches div, and append below the <select>
var sw = new Element('div', {'class': 'swatches-container'});
select.up().appendChild(sw);
// store these element to use later for recreate swatches
select.swatchLabel = label;
select.swatchElement = sw;
// hide select
select.setStyle({position: 'absolute', top: '-9999px'});
$A(select.options).each(function(opt, i) {
if (opt.getAttribute('value')) {
var elm;
var key = trim(opt.innerHTML);
// remove price
if (opt.getAttribute('price')) key = trim(key.replace(/'+([^+]+)$/, ''));
var item = find_swatch(label, key);
if (item)
elm = new Element('img', {
src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>swatches/'+item.img,
alt: opt.innerHTML,
title: opt.innerHTML,
'class': 'swatch-img'});
else {
console.debug(label, key, swatches);
elm = new Element('a', {'class': 'swatch-span'});
elm.update(opt.innerHTML);
}
elm.observe('click', function(event) {
select.selectedIndex = i;
fireEvent(select, 'change');
var cur = sw.down('.current');
if (cur) cur.removeClassName('current');
elm.addClassName('current');
});
sw.appendChild(elm);
}
});
}
// Hide Second Option's Label
function hideStuff(id) {
if (document.getElementById(id)) {
document.getElementById(id).style.display = 'none';
}
}
hideStuff("last-option-label");
function showStuff(id) {
if (document.getElementById(id)) {
document.getElementById(id).style.display = '';
}
}
function recreate_swatches_recursive(select) {
// remove the old swatches
if (select.swatchElement) {
select.up().removeChild(select.swatchElement);
select.swatchElement = null;
}
// create again
if (!select.disabled)
showStuff("last-option-label");
create_swatches(select.swatchLabel, select);
// recursively recreate swatches for the next select
if (select.nextSetting)
recreate_swatches_recursive(select.nextSetting);
}
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event, evt);
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
function trim(str) {
return str.replace(/^'s's*/, '').replace(/'s's*$/, '');
}
$$('#product-options-wrapper dt').each(function(dt) {
// get custom option's label
var label = '';
$A(dt.down('label').childNodes).each(function(node) {
if (node.nodeType == 3) label += node.nodeValue;
});
label = trim(label);
var dd = dt.next();
var select = dd.down('select');
if (select && has_swatch_key(label)) {
create_swatches(label, select);
// if configurable products, recreate swatches of the next select when the current select change
if (select.hasClassName('super-attribute-select')) {
select.observe('change', function() {
recreate_swatches_recursive(select.nextSetting);
});
}
}
});
}
catch(e) {
alert("Color Swatches javascript error. Please report this error to support@galathemes.com. Error:" + e.message);
}
});
</script>
console.debug已被弃用。在"function create_swatches(label,select)"中写入"console.debug(label、key、swatches);"将其更改为"console.log(label、key、samples);"或,您可以一起删除这行代码。。。。。。。导致的错误
相关文章:
- button.单击两次删除附加操作后不工作
- 为什么jQuery下拉列表需要单击两次
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 必须单击两次才能得到一个响应
- isHidden函数要求我在应用响应显示时单击两次
- 元素必须单击两次才能添加Class(自定义指令)
- 页面加载后的第一个锚定链接需要单击两次
- 单击两次后切换
- 必须在jQuery上单击两次
- 避免单击两次以开始编辑Backgrid中的布尔(复选框)单元格
- 单击两次提交按钮以发布表单
- 带有 OnClick 的 jQuery 链接标记 href 需要单击两次才能加载 AJAX
- Ionic:单击两次时显示活动/非活动按钮
- 事件仅在单击两次时激活
- jQuery 函数 - 单击两次返回一个值
- 必须单击两次才能触发
- 切换打开关闭必须在手机上单击两次
- 单击两次图标不会关闭下拉列表
- 平滑滚动并使用 Firefox 上的 popState 返回按钮 - 需要单击两次
- 在同一元素上单击两次,然后在另一个元素上单击两次,使第一个元素进入“单击”状态