DOM對象只需要兩次點擊在Internet Explorer中

Question

我真的在努力處理下面的代碼。對於使用DOM來說，我還真的很陌生，這個腳本在FireFox，Chrome和Safari中運行得非常完美。在Internet Explorer中，它需要兩次點擊。如果您訪問FireFox（http://bit.ly/yabAQg）中的以下鏈接，然後在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> 

Answer 1

我發現奇怪的部分在你的代碼

$$('#product-options-wrapper dt') 

你爲什麼要使用雙$是什麼？

Answer 2

console.debug已被棄用。在「函數create_swatches（label，select）」中寫入「console.debug（label，key，swatches）;」將其更改爲「console.log（label，key，swatches）;」或您可以將該行代碼全部刪除在一起 ....... thaterrorbegone