Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как дублировать класс (https://javascript.ru/forum/dom-window/77729-kak-dublirovat-klass.html)

Malleys 13.06.2019 00:41

Цитата:

Сообщение от ethereal
Это framework. Я не хочу менять что бы не испортить что то.

Так выберите качественный framework, при помощи которого вы сможете решать такие задачи легко... Например, React.js, высокий уровень использования, высокий уровень удовлетворённости. Это технология, которую можно спокойно использовать.

Сложно ли выучить новый framework? На самом деле нет, вот, например, μ-framework hyperapp, я о нём ещё 20 минут назад ничего не знал, решил посмотреть в интернете, какие есть, и был приятно удивлён разнообразию. hyperapp позволяет декларативно описать ваш интерфейс. Легко расширяется при помощи JSX. Ваш пример с использованием hyperapp...
<!DOCTYPE html>
<html lang="en">
<body>
	<div id="app"></div>
	<style>
		ul>li:not(.show) {
			text-decoration: line-through;
		}
	</style>
	<script type="module">
		import { h, app } from "https://unpkg.com/hyperapp@2.0.0-beta.22/src/index.js";
		
		const items = ["text 1", "text 2", "text 3", "text 4"];
		
		app({
			init: () => false,
			view: state => h("ul", {}, items.map(item =>
				h("li", {
					class: state ? "show" : "",
					tabIndex: 0,
					onFocus: state => true,
					onBlur: state => false
				}, item))
			),
			node: document.getElementById("app")
		})
	</script>
</body>

</html>


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

рони 13.06.2019 01:16

Malleys,
:victory:

рони 13.06.2019 12:03

Malleys,
спасибо за hyperapp, но никак не пойму зачем менять DOM по каждому клику, если нужно изменить только класс и чем плохо jQuery?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
        ul>li:not(.show) {
            text-decoration: line-through;
        }
        ul>li:focus{
            outline: none;
        }

    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
$(() =>{
  const items = ["text 1", "text 2", "text 3", "text 4"],
        html = items.map(text => $("<li>",{tabIndex: 0, text})),
        li = $("<ul>", {html})
        .replaceAll("#app")
        .on("focusin focusout", "li", ({type}) => li.toggleClass("show", type == "focusin")).
        find("li");
});
  </script>
</head>

<body>
<div id="app"></div>

</body>
</html>


Часовой пояс GMT +3, время: 00:46.