JavaScript obtenir de l'élément enfant

Pourquoi cela ne fonctionne pas dans firefox, j'essaie de sélectionner la catégorie, puis faire de la sous-catégorie visible.

<script type="text/javascript">
    function show_sub(cat) {
      var cat = document.getElementById("cat");
      var sub = cat.getElementsByName("sub");
      sub[0].style.display='inline'; 
}

</script>

-

<ul>
    <li id="cat" onclick="show_sub(this)">
        Top 1
        <ul style="display:none" name="sub">
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3</li>
        </ul>
    </li>
    <li>Top 2</li>
    <li>Top 3</li>
    <li>Top 4</li>
</ul>

MODIFIER la Réponse est: 

<script type="text/javascript">
   function show_sub(cat) {
      cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
   }
</script>
  • Je voudrais envisager d'utiliser une classe sub au lieu de l'attribut de nom de, dans cette situation. Si vous souhaitez utiliser jQuery c'est aussi simple que $('#cat .sub').css('display', 'inline').
  • Vous ignorez la cat paramètre, pourquoi?
  • C'est javascript question je n'ai pas besoin de jquery. @gdoron ce que vous voulez dire que je ignorer cat?
  • Vous remplacez la valeur que vous obtenez dans cat. De toute façon, quand vous dites qu'il ne fonctionne pas sous FF, ça marche avec un autre navigateur?
  • Vous passer une variable dans la fonction, et puis ne pas utiliser cette variable. Ce qui en fait un peu redondant (sauf si vous avez juste simplifié de la démo).
  • il ne fonctionne pas n'importe où donne-moi la version de travail s'il vous plaît.

InformationsquelleAutor redacted | 2012-05-12
  1. 44

    ULs n'ont pas un nom d'attribut, mais vous pouvez faire référence à l'ul par le nom de la balise.

    Essayez de remplacer la ligne 3 dans votre script avec ceci:

    var sub = cat.getElementsByTagName("UL");
    • Wor qui a travaillé gr8 j'avais besoin d' cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
    InformationsquelleAutor mkruzil
  2. 3

    Je vous suggère de faire quelque chose de similaire à:

    function show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = parent.getElementsByClassName('sub');
        if (sub[0].style.display == 'inline'){
            sub[0].style.display = 'none';
        }
        else {
            sub[0].style.display = 'inline';
        }
    }
}

document.getElementById('cat').onclick = function(){
    show_sub(this.id);
};​​​​

    JS Fiddle démo.

    Bien que le ci-dessus repose sur l'utilisation d'un class plutôt qu'un name attribut égal à sub.

    Pourquoi votre version d'origine "ne marche pas" (non, je dois ajouter, un instrument particulièrement utile pour la description du problème), tout ce que je peux suggérer, c'est que, dans le Chrome, la console JavaScript rapporté que:

    Uncaught TypeError: Object # n'a pas de méthode 'getElementsByName'.

    Une approche pour travailler autour de l'ancienne-c'est à dire de la famille des limitations est d'utiliser une fonction personnalisée pour émuler getElementsByClassName(), quoique grossièrement:

    function eBCN(elem,classN){
    if (!elem || !classN){
        return false;
    }
    else {
        var children = elem.childNodes;
        for (var i=0,len=children.length;i<len;i++){
            if (children[i].nodeType == 1
                &&
                children[i].className == classN){
                    var sub = children[i];
            }
        }
        return sub;
    }
}

function show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = eBCN(parent,'sub');
        if (sub.style.display == 'inline'){
            sub.style.display = 'none';
        }
        else {
            sub.style.display = 'inline';
        }
    }
}

var D = document,
    listElems = D.getElementsByTagName('li');
for (var i=0,len=listElems.length;i<len;i++){
    listElems[i].onclick = function(){
        show_sub(this.id);
    };
}​

    JS Fiddle démo.

    • Juste pour rendre les choses plus claires: il n'y a pas de element.getElementsByName, seulement document.getElementsByName.
    • Est-il possible d'éliminer getElementsByClassName son pas compatible avec IE 6 et 7
    • Il est certainement, oui; voir la mise à jour de réponse.
    • Gr8, vous avez juste eu faute de frappe var sub = enfants[i]; je trouve aussi, vous avez besoin de mettre le script après le langage html n'est pas dans la tête pour qu'il fonctionne.
    • Tout ce que je peux dire, c'est que, correction de fautes de frappe, ça fonctionne pour moi sur Firefox 12/Ubuntu 11.04. Quelle version/système d'exploitation utilisez-vous?
    • son fixe, maintenant, je le met sur le dessus de la tête au premier abord c'est pourquoi il n'a pas de travail.
    • Désolé dû décoller la réponse auprès de vous et de donner à quelqu'un d'autre becase tout ce que je nécessaire à faire est de changer une ligne de mon code pour le faire fonctionner, je ne sais pas pourquoi il doit être tellement complexe que vous en votre deuxième exemple décrit. La réponse est: cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";

    InformationsquelleAutor David Thomas
  3. 0

    Essayez celui-ci:

    function show_sub(cat) {
    var parent = cat,
    sub = parent.getElementsByClassName('sub');
    if (sub[0].style.display == 'inline'){
        sub[0].style.display = 'none';
    }
    else {
        sub[0].style.display = 'inline';
    }
}

document.getElementById('cat').onclick = function(){
    show_sub(this);
};​

    et de les utiliser pour IE6 & 7

    if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
               ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}
    • deuxième exemple pour IE6, 7 ne fonctionne pas dans n'importe quel navigateur.
    InformationsquelleAutor glarkou