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

Iga

Гуру форума
Регистрация
12 Янв 2014
Сообщения
425
Реакции
83
Приветствую!
Помогите совсем несведущему в 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';
        }
        });
но чё-то бред какой-то
 
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
 
Привожу код на нативном 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
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
IMHO, удобней просто переключать классы у элементов. JS ES5 код с jQuery.
Поддерживаю, что через классы лучше и правильнее. Для нативного js для этого удобно использовать elem.classList.toggle("class").
 
Для реализации пошаговости я обнаружил не очень свежий, но вполне работоспособный jQuery плагин Для просмотра ссылки Войди или Зарегистрируйся.
Может кому пригодится.
 
Гоняет статьи по циклу. Рабочий вариант. Обратите внимание на селекторы, отсутствие необходимости в классах...
Код:
<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
Назад
Сверху