отображение блоков по очереди с помощью кнопки

Тема в разделе "JavaScript", создана пользователем iga, 24 июл 2019.

  1. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Приветствую!
    Помогите совсем несведущему в javascript!

    Есть элементарный html
    Код:
    <div class="news">
        <article class="news2">news1</article>
        <article class="news2" style="display: none;">news2</article>
        <article class="news3" style="display: none;">news3</article>
        <article class="news4" style="display: none;">news4</article>
        <article class="news5" style="display: none;">news5</article>
    </div>
    <input class="mybutton" type="" value="Следующая" name="">
    
    Нужно по кнопке "Следующая" отображать новости по-очереди без перезагрузки страницы, при достижении последней новости желательно убить кнопку.
    Уже 3 часа сижу разбираю как устроены опросы, но так ничего толкового у меня и не вышло.
    Пробовал какие-то фигни выдумывать
    Код:
    $("input.mybutton").on("click", function(){
            if(document.getElementById('news1').style.display = 'block') {
                document.getElementById('news1').style.display = 'none';
                document.getElementById('news2').style.display = 'block';
            }
            });
    но чё-то бред какой-то
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Если уже используется jQuery, то нет смысла в голом js.
    И у вас news2 и т.д. - это классы, а вы к ним пытаетесь обратится, как к идентификаторам.

    Вообще, такое лучше с использованием аякса организовать, но если просто показывать/скрывать уже имеющиеся блоки, то так:
    Код:
    var counter = 1;
    var counterMax = 5;
    $("input.mybutton").on("click", function(){
        counter++;
        $("article[class^=news]").hide();
        $("article.news"+counter).show();
        if(counter>=counterMax){
            $("input.mybutton").hide();
        }
    });
    И у вас класс news2 надо на news1 исправить для первого блока (хотя на работоспособность это не повлияет).
     
    iga нравится это.