Если вы узнаете из этой серии какой-либо важный элемент философии архитектуры внешнего интерфейса, изучите этот. Просто смени классы. В этом скринкасте мы начинаем изучать большую кроличью нору JavaScript только для того, чтобы остановиться, поймать себя и вместо этого использовать CSS. Когда вы что-то меняете визуально, это область CSS. Он не только хорош в этом, он, как правило, более эффективен и поддерживает здоровое «разделение проблем», что делает веб-сайт здоровым в долгосрочной перспективе.
Опомнившись, мы просто поменяли местами 1) текст кнопки 2) data-stateатрибут в контейнере.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Вот где мы закончили:
Смотрите Pen quFCo Криса Койера (@chriscoyier) на CodePen
Да, это видео (и мнение) - это «просто смени классы!», И мы меняем атрибуты translate = "no"> data- * только потому, что они мне нравятся. Я думаю о них как о классах, разделенных именами, или о классах со значениями. Возможно, более полезен в CSS, чем классы, и у них точно такое же значение специфичности.
Это так? /: синтаксис выглядит странно? Если да, то это называется тернарным (или «условным») оператором.
Первая строка - это тест, следующая строка (или бит после?) - это то, что произойдет, если этот тест будет истинным, последняя строка (или бит после :) - это то, что произойдет, если этот тест окажется ложным. Возможно, это поможет:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");Не избегайте их только потому, что они выглядят странно, они могут быть более эффективными (и, в конечном счете, также хорошо читаются, если вы не сходите с ума), как логика if / else.
У Дуга Найнера есть хорошая статья об идее «просто измените классы». Классы обладают огромной силой в CSS. Вы можете скрывать / показывать вещи, перемещать их, изменять внешний вид вещей, запускать анимацию… небо - это предел. И чем выше в «дереве» (DOM) вы применяете класс, тем больше у вас возможностей каскадирования. Смена класса в теле означает, что вы можете управлять чем угодно на всей странице с помощью одного класса. И все это с очень небольшим количеством JavaScript.
Как только вы купитесь на это, вы станете более счастливым разработчиком.