Скрыть элемент по классу (только Javascript, без Jquery)

#javascript #onclick

Вопрос:

Я хотел бы скрыть элементы по имени класса. Я нашел рабочий пример, который выполняется вне функции. Однако, когда я использую onClick, это, похоже, больше не работает. Пожалуйста, взгляните на следующий пример:http://jsfiddle.net/SkfDz/9 Кто-нибудь, пожалуйста, может мне помочь?

HTML:

 <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
<input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>

<div class="today">TODAY</div>
<div class="today">TODAY</div>
<div class="today">TODAY</div>

<div class="tomorrow">TOMORROW</div>

Скрипт:

 function hideToday() {
    var todayElements = document.getElementsByClassName('today'), i;
    for (i = 0; i < todayElements.length; i  = 1) {
    todayElements[i].style.display = 'none';
    };
};

var tomorrowElements = document.getElementsByClassName('tomorrow'), i;
for (i = 0; i < tomorrowElements.length; i  = 1) {
    tomorrowElements[i].style.display = 'none';
}

Ответ №1:

Причина, по которой это не работает в jsfiddle, заключается в том, что ваша hideToday функция выходит за рамки. Я не знаю, в какой области видимости существует скрипт в jsfiddle, но, похоже, он не является глобальным.

Если вы поместите тот же код на веб-страницу и просмотрите его, он будет работать так, как ожидалось:

 <html>
<body>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <input class="" name="options" id="opt1" type="radio" onClick="hideToday()"/><label for="opt1">Hide today</label>
    <br>
    <br>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <div class="today">TODAY</div>
    <br>
    <div class="tomorrow">TOMORROW</div>
    <script>
        function hideToday() {
            var todayElements = document.getElementsByClassName('today'), i;
            for (i = 0; i < todayElements.length; i  = 1) {
            todayElements[i].style.display = 'none';
            };
        };

        var appBanners = document.getElementsByClassName('tomorrow'), i;
        for (i = 0; i < appBanners.length; i  = 1) {
            appBanners[i].style.display = 'none';
        }
    </script>
</body>
</html>

Вы можете исправить свою скрипку, экспортировав hideToday на window :

 window["hideToday"] = hideToday;

http://jsfiddle.net/SkfDz/16/

1. Элементы управления jsfiddle позволяют указать ему перенос кода, введенного в нижнем левом квадранте, в обработчик загрузки окна. Также можно указать, чтобы он этого не делал.

Ответ №2:

Если вы хотите использовать onClick таким образом, что является плохой идеей, вам нужно вставить в вас свой javascript Head , чтобы вы могли заставить свою скрипку работать, просто изменив второе поле выбора вверху слева на No wrap - in <head> Но было бы лучше не использовать встроенный javascript и поместить обработку событий во внешний файл тоже.