Что является альтернативой использованию getElementByClass для сокрытия нескольких элементов? - PullRequest
Новая
       12

Что является альтернативой использованию getElementByClass для сокрытия нескольких элементов?

0 голосов
/ 02 сентября 2011

У меня есть страница, на которой есть несколько ссылок, которые я бы хотел переключать с помощью двух кнопок. Он работает с одной ссылкой, используя getElementById, но мне нужно переключить несколько групп из них. Я начал с этого, но это не сработало. Я слышал, что getElementByClass работает со всеми, кроме IE, но я использую Opera 11.5, и он все еще не будет работать. Я провел небольшой поиск, но я немного новичок в javascript и не понимаю большинство объяснений. Может ли кто-нибудь помочь мне с простой альтернативой или помочь решить проблему, с которой я столкнулся? Это тестовая страница, которую я использовал. 

<head>
<script type="text/javascript">
function hideNames()
{
document.getElementByClass("webname").style.display="none";
}
function showNames()
{
document.getElementByClass("webname").style.display="inline";
}
</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

Ответы [ 3 ]

1 голос
/ 02 сентября 2011

Вам нужно исправить свой код, чтобы использовать правильное имя функции и обрабатывать возвращаемый результат этой функции в виде массива. Он должен хорошо работать, за исключением очень старых браузеров, которые не имеют getElementsByClassName (это все версии IE до IE9). Вместо этого можно использовать заменители, которые не столь эффективны, но работают путем фильтрации всех тегов в документе.

Если вам нужен только один элемент, используйте document.getElementById("idvalue") и оперируйте идентификатором вместо имени класса. getElementById широко поддерживается даже в старых браузерах.

Вот как ваш код может работать с именами классов: 

<head>
<script type="text/javascript">
function hideNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="none";
    }
}

function showNames()
{
    var list = document.getElementsByClassName("webname");
    for (var i = 0; i < list.length; i++) {
        list[i].style.display="block";
    }
}

</script>
</head>
<body>
<p class="webname">Webname</p>
<p class="webname">test</p>
<input type="button" onclick="hideNames()" value="Hide Web Names" />
<input type="button" onclick="showNames()" value="Show Web Names" />
</body>

P.S. <p> теги отображаются: блок, а не дисплей: inline.

Для старых браузеров лучше всего использовать предварительно созданный механизм выбора, который решит все кросс-браузерные проблемы за вас. Я использовал YUI, jQuery и Sizzle (Sizzle - это механизм выбора внутри YUI и jQuery). Все бесплатно и очень хорошо.

Вы также можете просто получить некоторый код для собственной реализации getElementsByClassName, если вам нужно оставаться нативным javascript. Вот некоторые источники: http://ejohn.org/blog/getelementsbyclassname-speed-comparison/ и http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/.

Чтобы показать вам, как все просто с jQuery, вот весь код для этого: http://jsfiddle.net/jfriend00/qP3XZ/.

HTML это: 

<p class="webname">Webname</p>
<p class="webname">test</p>
<input id="hide" type="button" value="Hide Web Names" />
<input id="show" type="button" value="Show Web Names" />

Код такой: 

$(document).ready(function() {
    $("#hide").click(function() {
        $(".webname").hide();
    });

    $("#show").click(function() {
        $(".webname").show();
    });
});
1 голос
/ 02 сентября 2011

И он вернет массив элементов, которые вам затем нужно будет перебрать, поэтому я сомневаюсь, что ваш код будет работать.Но, возможно, вы захотите взглянуть на jQuery, который значительно упрощает код такого типа

0 голосов
/ 02 сентября 2011

Вы можете использовать jQuery и выбрать все элементы с одинаковым классом: 

$('.myclass').onclick(function() {
    ...some instruction...
});

Или один и тот же элемент: 

$('button').onclick(function() {
    ...some instruction...
});
...