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

ethereal 11.06.2019 20:35
Как дублировать класс
 
Есть такой код:

<ul>
  <li>text</li>
  <li>text</li>  
  <li class="show">text</li>  
  <li>text</li>  
</ul>


Класс show добавляется и исчезает автоматически к одному li. Как сделать что бы когда класс show добавляется, вместе с ним добивился класс и к остальним li?

Вот так:
<ul>
  <li class="show">text</li>
  <li class="show">text</li>  
  <li class="show">text</li>  
  <li class="show">text</li> 
</ul>


и также исчезали, если класс отсутствует.
https://codepen.io/anakin-skywalker94/pen/KjwKGG

Спасибо!

рони 11.06.2019 20:57
ethereal,
может изменить функцию, которая ставит класс, а не ставить "сторожа"?

ethereal 11.06.2019 20:59
Тут не так все просто, если изменить функцию - не будет все правильно работать

рони 11.06.2019 21:16
ethereal,
:-?

Malleys 12.06.2019 14:03
Цитата:
Сообщение от ethereal
Класс show добавляется и исчезает автоматически к одному li. Как сделать что бы когда класс show добавляется, вместе с ним добивился класс и к остальним li?
У вас сейчас получается ul > li.show и выбран один элемент списка. Вы можете добавлять класс .show не к элементу списка, а к самому списку. Получится ul.show > li и выбраны все элементы списка!

Цитата:
Сообщение от ethereal
Тут не так все просто, если изменить функцию - не будет все правильно работать
То, что вы показали, непременно будет работать, вам только прописать в стилях правильный селектор!

ethereal 12.06.2019 21:02
Неужели нету возможность на JS это сделать?

рони 12.06.2019 21:38
Цитата:
Сообщение от ethereal
Неужели нету возможность на JS это сделать?
Цитата:
Сообщение от ethereal
если изменить функцию - не будет все правильно работать
:)

ethereal 12.06.2019 21:57
Я говорю про дополнительный код, не связаный с функцией.

Я сделал вот так:
$( '.menu-navigation li' ).click(function() {
  setTimeout(function(){
    $(".show").siblings().toggleClass('show');
  }, 2000);
});


Классы добавляется как надо, только уже не удаляются.

рони 12.06.2019 22:04
ethereal,
измените функцию которая ставит класс!!!

ethereal 12.06.2019 22:08
Это framework. Я не хочу менять что бы не испортить что то.

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, время: 20:57.