Вход

Просмотр полной версии : Как дублировать класс

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
Класс show добавляется и исчезает автоматически к одному li. Как сделать что бы когда класс show добавляется, вместе с ним добивился класс и к остальним li?


У вас сейчас получается ul > li.show и выбран один элемент списка. Вы можете добавлять класс .show не к элементу списка, а к самому списку. Получится ul.show > li и выбраны все элементы списка!

Тут не так все просто, если изменить функцию - не будет все правильно работать
То, что вы показали, непременно будет работать, вам только прописать в стилях правильный селектор!
ethereal
12.06.2019, 21:02
Неужели нету возможность на JS это сделать?
рони
12.06.2019, 21:38
Неужели нету возможность на JS это сделать?

если изменить функцию - не будет все правильно работать
:)
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
Это framework. Я не хочу менять что бы не испортить что то. Так выберите качественный framework, при помощи которого вы сможете решать такие задачи легко... Например, React.js, высокий уровень использования, высокий уровень удовлетворённости. Это технология, которую можно спокойно использовать.

Сложно ли выучить новый framework? На самом деле нет, вот, например, μ-framework hyperapp (https://github.com/jorgebucaran/hyperapp), я о нём ещё 20 минут назад ничего не знал, решил посмотреть в интернете, какие есть, и был приятно удивлён разнообразию. hyperapp (https://github.com/jorgebucaran/hyperapp) позволяет декларативно описать ваш интерфейс. Легко расширяется при помощи JSX. Ваш пример с использованием hyperapp (https://github.com/jorgebucaran/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>