pandaa
@pandaa

Приведите пример самого экономного кода?

Задача очень простая, кликая на кнопку next, отображаем содержимое следующего тега section, back - предыдущего.

<section>
	<h1>1</h1>
	<button>Next</button>
</section>

<section>
	<h1>2</h1>
	<button>Back</button>
	<button>Next</button>
</section>

<section>
	<h1>3</h1>
	<button>Back</button>
	<button>Next</button>
</section>

<section>
	<h1>4</h1>
	<button>Back</button>
</section>

Хочу посмотреть на самый элегантный вариант.
  • Вопрос задан
  • 454 просмотра
Пригласить эксперта
Ответы на вопрос 4
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
HTML + CSS only:
Ответ написан
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
На jQuery:
https://codepen.io/tsymbal_su/pen/PoPKXGK


css:
section.active {
  display: block;
}
section:not(.active) {
  display: none;
}


js:
jQuery(document).ready(function($){

  $("section:nth-child(1)").addClass("active");

  $(document).on("click","section.active button",function(){
    if ($(this).text()=="Next") {
      $(this).parents("section").removeClass("active").next("section").addClass("active");
    } else if ($(this).text()=="Back") {
      $(this).parents("section").removeClass("active").prev("section").addClass("active");
    }
  });
  
})
Ответ написан
Xuxicheta
@Xuxicheta
инженер
Никакого жквери
https://jsfiddle.net/melchiorio/6sqoherp/
6 строк js и один тэг-обертка
Ответ написан
pandaa
@pandaa Автор вопроса
Без изменеия html
section{
    display: none;
}
.block{
    display: block;
}

let m = document.getElementsByTagName('section');


let i = 0;
let y = 0;

loop(i);

function loop(i){

    m[y].classList.remove('block');
    m[i].classList.add('block');


    let buttons = m[i].getElementsByTagName('button');

    if (buttons.length > 1) {
        if (buttons[0].innerHTML == 'Back') {
            buttons[0].onclick = function () {
                console.log('back');
                y = i;
                i--;
                loop(i);
            }
        }
        if (buttons[1].innerHTML == 'Next') {
            buttons[1].onclick = function () {
                console.log('next');
                y = i;
                i++;
                loop(i);
            }
        }
    }else{
        if (buttons[0].innerHTML == 'Next') {
            buttons[0].onclick = function () {
                console.log('next');
                y = i;
                i++;
                loop(i);
            }
        }
        if (buttons[0].innerHTML == 'Back') {
            buttons[0].onclick = function () {
                console.log('back');
                y = i;
                i--;
                loop(i);
            }   
        }
    }

}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы