DOMオブジェクトでは、Internet Explorerで2回のクリックしか必要ありません。

Question

次のコードでは本当に苦労します。私はまだjavascriptでDOMを使うのは初めてです。このスクリプトはFireFox、Chrome、Safariで完璧に動作しています。 Internet Explorerでは、2回のクリックが必要です。 FireFox（http://bit.ly/yabAQg）の次のリンクをクリックし、Internet Explorerで同じリンクをクリックすると、FireFoxで図形をクリックするとInternet Explorerでこれを行うと直ちに色のオプションが表示されます。色は表示されませんシェイプを2回クリックするか、シェイプをクリックして別のシェイプをクリックするまでのオプション。 IE、DOM、Javascriptの忍者がIEで2回クリックする必要があるスクリプトの何が間違っているか教えてください。

<?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は廃止されました。 "console.debug（label、key、swatches）;と書かれている" function create_swatches（label、select） "では、"console.log（label、key、swatches）;に変更してください。またはそのコード行をすべて削除することができます ....... thaterrorbegone