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

Iga

Гуру форума
Регистрация
12 Янв 2014
Сообщения
425
Реакции
77
Приветствую!
Помогите совсем несведущему в 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';
        }
        });
но чё-то бред какой-то
 

furrutia

Писатель
Регистрация
7 Фев 2017
Сообщения
2
Реакции
17
im going to answer you in english:

You are taking the element by id, but you have put class in case, so you need change:

<div class="news">
<article id="news1">news1</article>
<article id="news2" style="display: none;">news2</article>
<article id="news3" style="display: none;">news3</article>
<article id="news4" style="display: none;">news4</article>
<article id="news5" style="display: none;">news5</article>
</div>
<input class="mybutton" type="" value="Следующая" name="">

and

$("input.mybutton").on("click", function(){
if(document.getElementById('news1').style.display = 'block') {
document.getElementById('news1').style.display = 'none';
document.getElementById('news2').style.display = 'block';
}
});

should work.

Enjoy
 

AlexDeg

Создатель
Регистрация
9 Апр 2019
Сообщения
7
Реакции
2
Привожу код на нативном JS, который подходит для любого количества статей. Более красиво можно сделать, если работать через классы.
Код:
<script>
    let index = 0;
    let news = document.querySelectorAll("div.news > article");
    let button = document.getElementsByClassName("mybutton")[0];
    button.addEventListener("click", () => {
        news[index].style.display = "none";
        index++;
        news[index].style.display = "block";
        if (index == news.length - 1) button.style.display = "none";
    })
</script>

Оно же на JQuery:
Код:
let index = 0;
        let news = $("div.news > article");
        $(".mybutton").on("click", function () {
            $(news[index]).css("display", "none");
            index++;
            $(news[index]).css("display", "block");
            if (index == news.length - 1) $(".mybutton").css("display", "none");
        })
 
Последнее редактирование:
  • Нравится
Реакции: Iga

ABOCuk

Писатель
Регистрация
18 Авг 2019
Сообщения
8
Реакции
1
IMHO, удобней просто переключать классы у элементов. JS ES5 код с jQuery.

Код:
<div class="news">
    <article class="news2">news1</article>
    <article class="news2 is-hidden">news2</article>
    <article class="news3 is-hidden">news3</article>
    <article class="news4 is-hidden">news4</article>
    <article class="news5 is-hidden">news5</article>
</div>
<input class="mybutton" type="" value="Следующая" name="">
<style>
.is-hidden {
  display: none;
}
</style>
Код:
var $articles = $('.news > article');
var articleIndex = 0;
if ($articles.length) { // если есть на странице
  $('.mybutton').on('click', function(e) {
    e.preventDefault();
    $articles.addClass('is-hidden'); // скрываем все
    articleIndex++;
    if (articleIndex >= $articles.length - 1) {
       articleIndex = 0; // зацикливаем
    }
    $articles[articleIndex].removeClass('is-hidden'); // показываем текущую
  });
}
 
  • Нравится
Реакции: Iga

AlexDeg

Создатель
Регистрация
9 Апр 2019
Сообщения
7
Реакции
2
IMHO, удобней просто переключать классы у элементов. JS ES5 код с jQuery.
Поддерживаю, что через классы лучше и правильнее. Для нативного js для этого удобно использовать elem.classList.toggle("class").
 

Iga

Гуру форума
Регистрация
12 Янв 2014
Сообщения
425
Реакции
77
Для реализации пошаговости я обнаружил не очень свежий, но вполне работоспособный jQuery плагин Для просмотра ссылки Войди или Зарегистрируйся.
Может кому пригодится.
 

garphild

Постоялец
Регистрация
19 Май 2009
Сообщения
60
Реакции
31
Гоняет статьи по циклу. Рабочий вариант. Обратите внимание на селекторы, отсутствие необходимости в классах...
Код:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="news">
    <article class="news1">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="button" value="Следующая" name="">

<script>
var current=0;
$(function() {
  $("input.mybutton").on("click", function(){
    var elements = $(".news").children();
    elements.css({display: 'none'});
    current++;
    if(current>=elements.length) current = 0;
    elements.eq(current).css({display: 'block'});
  });
});
</script>
</body>
</html>
 
  • Нравится
Реакции: Iga
Сверху