Сценарий получения элемента по имени класса не работает

Question

Я знаю, это не поддерживается IE, но я нашел в интернете классный скрипт, который кто-то был достаточно щедрым, чтобы бесплатно предоставить, но я не могу понять, почему он не работает. Я смотрю на это часами, пожалуйста, укажите мне правильное направление!

Мой код:

<script language="javascript" type="text/javascript" src="getbyclass.js"></script>
<script type="text/javascript" language="javascript">
function editToggle(toggle){
    if (toggle == "off"){
    getElementsByClassName("editp").style.display ="none";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    getElementsByClassName("editp").style.display ="inline";
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

также:

echo "<span id=\"editToggle\"><a href=\"#\" onclick=\"editToggle(); return false;\">Edit Mode: <span style=\"color:red;\">OFF</span></a></span>";

Код из getbyclass.js можно увидеть здесь.

---

В ответ на ответы ниже, я попробовал это:

function editToggle(toggle){
    var list = getElementsByClassName("editp");
    if (toggle == "off"){
    //getElementsByClassName("editp").style.display ="none";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="none";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"off\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";
    toggle="on";
    }else{
    //getElementsByClassName("editp").style.display ="inline";
        for (index = 0; index < list.length; ++index) {
            list[index].style.display ="inline";
        }
    document.getElementById('editToggle').innerHTML="<a href=\"#\" onclick=\"editToggle(\"on\"); return false;\">>Editfalse;\">Edit Mode: <span style=\"color:green;\">on</span></a>";
    toggle="off";
    }
}

Но это все еще не работает.

Answer 1

getElementsByClassName возвращает коллекцию Вам может понадобиться просмотреть результаты, например так:

var elements = document.getElementsByClassName('editp');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.display='none';
}

• elements - это живой NodeList найденных элементов в порядке их появления в дереве.
• names - строка, представляющая список имен классов для сопоставления; имена классов разделяются пробелами
• getElementsByClassName может вызываться для любого элемента, а не только для документа. Элемент, по которому он вызывается, будет использоваться в качестве корня поиска.

Должен пройти через это.

Answer 2

getElementsByClassName возвращает NodeList (или массив, если он не встроен), но вы используете его, как если бы он был HTMLElement ссылаясь непосредственно на style собственность на это:

getElementsByClassName("editp").style.display ="none";
// here ------------------------^

Вы должны увидеть ошибку в консоли JavaScript, так как вы пытаетесь получить свойство display от undefined (поскольку getElementsByClassName("editp").style будет undefined).

Если вы хотите воздействовать на первый соответствующий элемент:

var elm = getElementsByClassName("editp")[0];
if (elm) {
    elm.style.display ="none";
}

... или если вы хотите действовать на всех из них:

var index;
var list = getElementsByClassName("editp");
for (index = 0; index < list.length; ++index) {
    list[index].style.display ="none";
}

---

Обновление:

В какой-то момент вы отредактировали вопрос и удалили var toggle = "off" из кода (в глобальной области видимости, чуть выше функции) и сделал toggle аргумент editToggle, Но вы ничего не передаете в editToggle в соответствии с указанной вами разметкой, и даже если вы toggle новое значение внутри функции не будет иметь никакого длительного эффекта, если это аргумент функции, так как ничто не ссылается на него после возврата функции.

Answer 3

В разметке, которую вы создаете, могут быть неопределенные строковые литералы. Также кажется, что могут быть другие проблемы, упомянутые в других сообщениях.

Изменить:

 "<a href=\"#\">Edit Mode: <span style=\"color:red;>OFF</span></a>";

в

"<a href=\"#\">Edit Mode: <span style=\"color:red;\">OFF</span></a>";

Эта ситуация также присутствует в другой разметке, которую вы создаете.

Изменить:

"<a href=\"#\">Edit Mode: <span style=\"color:green;>on</span></a>";

в

"<a href=\"#\">Edit Mode: <span style=\"color:green;\">on</span></a>";

Answer 4

У вас, кажется, пропущена точка с запятой после var toggle="off",

Убедитесь, что вы звоните editToggle() где-то в вашем коде.

Я советую вам использовать инспекторы, встроенные в браузеры или расширения. Например, расширение Firebug для Firefox или Chrome Inspector. Используйте консоль для отладки и посмотрите, есть ли ошибки в вашем javascript.