2

私が持っている HTML の Internet Explorer 8 で折りたたみ可能なリストを作成しようとしています。

<li>
 <a href="#" onclick="test('node1')">hello</a>
 <ul id="node1" class="node" style="display:none">
   <li>Sub-item 1</li>
   <li>Sub-item 2</li>
 </ul>
</li>
<li>
 <a href="#" onclick="test('node2')">test</a>
  <ul id="node2" class="node" style="display:none">
   <li>Sub-item 1</li>
   <li>Sub-item 2</li>
 </ul>
</li>

私が持っているjavascriptで

function test2(className, link) {
 var e = document.getElementsByClassName(className);

 for (var i = 0, len = e.length; i < len; i++) {
   e[i].style.display = "none";
  }

  link.innerHTML = "Expand";
 }

私はそれを呼び出すためにこれを使用しています：

      <a href="#" onclick="test2('node', this)">Collapse</a>

残念ながら、この方法は IE8 では機能せず、querySelectAll. 誰かがこれを修正する方法の例を提供できますか?

4

3 に答える 3

15

Element.prototypeとを拡張することによる簡単な解決策を次に示しdocumentます。

(function() {
if (!document.getElementsByClassName) {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    getElementsByClassName = function(className, context) {
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements, all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
    document.getElementsByClassName = function(className) {
        return getElementsByClassName(className, document);
    };

    if(Element) {
        Element.prototype.getElementsByClassName = function(className) {
            return getElementsByClassName(className, this);
        };
    }
}
})();

ただし、特に存在しないネイティブ関数とまったく同じように名前が付けられた関数を使用して、プロトタイプ オブジェクトを拡張することが常に最善のアイデアであるとは限りません。プロトタイプの拡張によって引き起こされる問題を回避したい場合は、次のコードを使用します。

(function() {
    var indexOf = [].indexOf || function(prop) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === prop) return i;
        }
        return -1;
    };
    window.getElementsByClassName = function(className,context) {
        if (context.getElementsByClassName) return context.getElementsByClassName(className);
        var elems = document.querySelectorAll ? context.querySelectorAll("." + className) : (function() {
            var all = context.getElementsByTagName("*"),
                elements = [],
                i = 0;
            for (; i < all.length; i++) {
                if (all[i].className && (" " + all[i].className + " ").indexOf(" " + className + " ") > -1 && indexOf.call(elements,all[i]) === -1) elements.push(all[i]);
            }
            return elements;
        })();
        return elems;
    };
})();​

getElementsByClassName()そうすれば、 2 つの引数を受け取る関数を安全に使用できます。

  1. className: CSS クラス
  2. context: ノード
于 2012-11-11T00:29:11.620 に答える
5

IE8 は をサポートしていませんgetElementsByClassNameが、サポートしていquerySelectorAllます。

を使用するquerySelectorAllには、有効なクラス セレクターが必要です。つまり、クラス.を表すために a を使用する、クラスのセレクター API 構文を使用する必要があります。

function test2(className, link) {
    var e = document.querySelectorAll("." + className);

    for (var i = 0, len = e.length; i < len; i++) {
        e[i].style.display = "none";
    }

    link.innerHTML = "Expand";
}
于 2012-11-07T00:23:14.830 に答える
1

そこにない場合は、自分で実装できます。

// shim for older browsers:
if (!document.getElementsByClassName) {
    document.getElementsByClassName = (function(){
        // Utility function to traverse the DOM:
        function traverse (node, callback) {
            callback(node);
            for (var i=0;i < node.childNodes.length; i++) {
                traverse(node.childNodes[i],callback);
            }
        }

        // Actual definition of getElementsByClassName
        return function (name) {
            var result = [];
            traverse(document.body,function(node){
                if (node.className == name) {
                    result.push(node);
                }
            });
            return result;
        }
    })()
}

document.getElementsByClassName古いブラウザでも使えるようになりました。シムとネイティブ実装の違いの 1 つは、シムが nodelist (または htmlelementcollection) ではなく実際の配列を返すことです。

于 2012-11-07T02:53:47.873 に答える