5

IE で getElementsByClassName の問題を解決する方法がわかりません。ロバート・ナイマン (私の担当者は 1 人しかいないため、リンクを投稿できません) の解決策をコードに実装するにはどうすればよいでしょうか? それともjqueryの解像度の方が良いでしょうか? 私のコードは

function showDesc(name) {
var e = document.getElementById(name);
//Get a list of elements that have a class name of service selected
var list = document.getElementsByClassName("description show");

//Loop through those items
for (var i = 0; i < list.length; ++i) { 
    //Reset all class names to description
    list[i].className = "description";
}

if (e.className == "description"){
    //Set the css class for the clicked element
    e.className += " show";
}
else{
    if (e.className == "description show"){
        return;
    }
}}

このページdev.msmnet.com/services/practice-managementで使用して、各サービスの説明を表示/非表示にしています (Chrome と FF で動作します)。どんなヒントでも大歓迎です。

4

6 に答える 6

2

これは複数のクラスをサポートする必要があります。

function getElementsByClassName(findClass, parent) {

  parent = parent || document;
  var elements = parent.getElementsByTagName('*');
  var matching = [];

  for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){

    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
      matching.push(elements[i]);
    }

  }

  return matching;

}

親を渡すこともできます。これにより、DOMの検索が少し速くなります。

getElementsByClassName('a c')HTMLと一致させたい場合は、次<div class="a b c" />のように変更してみてください...

var elementClasses = elements[i].className.split(/\s+/),
    matchClasses = findClass.split(/\s+/), // Do this out of the loop :)
    found = 0;

for (var j = 0, elementClassesLength = elementClasses.length; j < elementClassesLength; j++) {

    if (matchClasses.indexOf(elementClasses[j]) > -1) {
        found++;
    }

}

if (found == matchClasses.length) {
   // Push onto matching array
}

この関数をまだ存在しない場合にのみ使用できるようにする場合は、その定義を次のようにラップします。

if (typeof document.getElementsByClassName != 'function') { }
于 2010-12-09T23:32:34.437 に答える
2

関数のjQueryバージョンがどのようになるか知りたいと思ったので、次のことを思いつきました。

function showDesc(name) {
    var e = $("#" + name);
    $(".description.show").removeClass("show");
    if(e.attr("class") == "description") {
        e.addClass("show");
    } else if(e.hasClass("description") && e.hasClass("show")) {
        return;
    }
}
于 2010-12-09T23:44:33.223 に答える
1

さらに簡単なjQueryソリューション：

$('.service').click( function() {
    var id = "#" + $(this).attr('id') + 'rt';
    $('.description').not(id).hide();
    $( id ).show();
}

jQueryを使用しているのに、なぜshowクラスを気にするのですか？

于 2010-12-09T23:54:21.437 に答える
1

以前は HTMLElement.getElementByClassName() を実装していましたが、少なくとも Firefox と Chrome では、要素が多い場合に要素の半分しか見つけられず、代わりに次のようなものを使用します (実際にはより大きな関数です)。

getElmByClass(clm, parent){
   // clm:  Array of classes
   if(typeof clm == "string"){ clm = [clm] }
   var i, m = [], bcl, re, rm;
   if (document.evaluate) {    // Non MSIE browsers
      v = "";
      for(i=0; i < clm.length; i++){
         v += "[contains(concat(' ', @"+clc+", ' '), ' " + base[i] + " ')]";
      }
      c = document.evaluate("./"+"/"+"*" + v, parent, null, 5, null);
      while ((node = c.iterateNext())) {
          m.push(node);
      }
   }else{                  // MSIE which doesn't understand XPATH
      v = elm.getElementsByTagName('*');
      bcl = "";
      for(i=0; i < clm.length; i++){
          bcl += (i)? "|":"";
          bcl += "\\b"+clm[i]+"\\b";
      }
      re = new RegExp(bcl, "gi");
      for(i = 0; i < v.length; i++){
         if(v.className){
             rm = v[i].className.match(bcl);
             if(rm && rm.length){      // sometimes .match returns an empty array so you cannot use just 'if(rm)'
                 m.push(v[i])
             }
         }
      }
    }
    return m;
}

RegExp は遅いため (おそらく .indexOf を使用する関数であり、テストする必要があります)、XPATH を使用せずに反復するより高速な方法があると思いますが、うまく機能しています。

于 2012-02-17T17:34:16.337 に答える
1

これは私がまとめたもので、信頼性が高く、おそらく最速です。どんな状況でも機能するはずです。

function $class(className) {
    var children = document.getElementsByTagName('*') || document.all;
    var i = children.length, e = [];
    while (i--) {
        var classNames = children[i].className.split(' ');
        var j = classNames.length;
        while (j--) {
            if (classNames[j] == className) {
                e.push(children[i]);
                break;
            }
        }
    }
    return e;
}
于 2012-07-16T11:37:12.670 に答える
0

getElementsByClassName()次のものに置き換えることができます。

function getbyclass(n){
  var elements = document.getElementsByTagName("*");
  var result = [];
  for(z=0;z<elements.length;z++){
    if(elements[z].getAttribute("class") == n){
      result.push(elements[z]);
    }
  }
  return result;
}

次に、次のように使用できます。

getbyclass("description") // Instead of document.getElementsByClassName("description")
于 2010-12-09T23:28:52.930 に答える