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

Question

[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>

Хочу посмотреть на самый элегантный вариант.

Comments

[edward_freedom]

чтобы сделать более элегантный код, надо видеть твою реализацию, кинь свой код

[xmoonlight]

могу подсказать: там должно быть обязательно: ++ и -- :)
И "querySelector".

[Александр Цымбал]

похоже, вам препод задал задачу на засыпку, а вы хотите, чтобы мы прочитали мысли вашего препода и написали код, который понравится ему, потому что он считает, что его вариант - самый элегантный.

[pandaa]

edward_freedom, я не писал, как и вы

[edward_freedom]

pandaa, так напиши и кинь, твой вопрос, скрытое задание, которые я разоблачил в первом же сообщении. Напиши свой код, кинь его и будет уже элегантнее варианты отталкиваясь от твоего. Элегантнее от ничего, это ничего

[xmoonlight]

Александр Цымбал, мне?!)) ну машинально, бывает...

[Александр Цымбал]

xmoonlight, прошу прощения ;) это автору

[pandaa]

edward_freedom, смотри

Answer 1

[Rsa97]

HTML + CSS only:

Comments

[Александр Цымбал]

Ну вроде как html менять нельзя.
Просто я хотел тоже сделать на css, но подумал, что задача именно в том, чтобы использовать данный код.

Answer 2

[Александр Цымбал]

На 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");
    }
  });
  
})

Comments

[Александр Цымбал]

pandaa, давай свой

Answer 3

[Антон Швец]

Никакого жквери
https://jsfiddle.net/melchiorio/6sqoherp/
6 строк js и один тэг-обертка

Comments

[xmoonlight]

div.querySelectorAll('section').forEach((section, i) => section.hidden = !(i == step));

АД!)

[Антон Швец]

xmoonlight, Люблю write-only заклинания :)

https://jsfiddle.net/melchiorio/mg1uh8zx/

[Антон Швец]

Антон Швец,
итак. финальный вариант

<div onclick="k=this.dataset.k;t=event.target.textContent;this.dataset.k=+k+(t=='Next'&&1||t=='Back'&&-1||0);[...this.children].forEach((s,i)=>s.hidden=!(i==s))" data-k=1>
  <section>
    <h1>1</h1>
    <button>Next</button>
  </section>

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

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

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

[xmoonlight]

Антон Швец, убери форичАлл!!!
Это АД!!! А не заклинания!)))
Зачем перебираешь всё, когда у тебя есть известные состояния сразу после инициализации?!!)))
ОМГ..

[Антон Швец]

xmoonlight, меньше кода

[xmoonlight]

Антон Швец, смешно)))
Меньше кода, но тормознее в n-section-1 раз!

[Антон Швец]

xmoonlight, приходи в следующий раз, когда заметишь тормоза.
а вообще есессно подобное на проде неприемлемо. Там и других проблем хватает.
Но в данном случае в условии задачи поставлена краткость, и это вариант оказывается короче на 16 символов.

[xmoonlight]

Антон Швец,

Хочу посмотреть на самый элегантный вариант.

вот задача.
Твой код НЕ элегантен (пока там перебор всего и вся)!

Answer 4

[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);
            }   
        }
    }

}

Comments

[pandaa]

Его можно доработать