ошибка появилась из ниоткуда
.hidden {
opacity: 0;
}data: () => ({
items: [
{ text: '...', hidden: true },
{ text: '...', hidden: true },
...
],
}),
mounted() {
this.items.forEach((n, i) => {
setTimeout(() => n.hidden = false, 300 * (i + 1));
});
},<li v-for="{ text, hidden } in items" :class="{ hidden }">
<a href="">{{ text }}</a>
</li>20 таймеров это плохо
mounted() {
(function next(data, i) {
if (i < data.length) {
data[i].hidden = false;
setTimeout(next, 300, data, i + 1);
}
})(this.items, 0);
},async function asyncDelayedForEach(data, callback, delay) {
for (let i = 0; i < data.length;) {
await callback.call(data, data[i], i, data);
if (++i < data.length) {
await new Promise(r => setTimeout(r, delay));
}
}
}mounted() {
asyncDelayedForEach(this.items, n => n.hidden = false, 300);
},const length = 25;
const createItem = i => ({
url: `photos/${i}.jpg`,
// ещё какие-то свойства
});const items = Array.from({ length }, (_, i) => createItem(i + 1));
// или
const items = [];
for (let i = 1; i <= length; i++) {
items.push(createItem(i));
}
// или
const items = [];
while (items.length < length) {
items[items.length] = createItem(-~items.length);
}
// или
const items = (function createItems(i) {
return i > 0 ? [ ...createItems(i - 1), createItem(i) ] : [];
})(length);И самое главное, мне нужно потом взять значение этих массивов.
descriptionImage.url - Как-то так
descriptionImage[индекс элемента].url.
не оборачиваются
$('.list').find('li:gt(2)').hide();
// или
$('li:gt(2)', '.list').hide();
// или
$('.list li:nth-child(3)').nextAll().hide();
// или
$('.list li:nth-child(n + 4)').hide();
// или
$('.list li').next().next().next().hide();
// или
$('.list > + + +').hide();Array
.from(document.querySelectorAll('.list'))
.flatMap(n => [...n.children].slice(3))
.forEach(n => n.hidden = true);
// или (тут надо будет стиль добавить: .hidden { display: none; })
[].forEach.call(document.getElementsByClassName('list'), n => {
[].forEach.call(n.getElementsByTagName('li'), (m, i) => {
m.classList.toggle('hidden', i > 2);
});
});hide('.list', 'li', 3);): function hide(containerSelector, itemSelector, hideFrom) {
$(containerSelector).each((i, n) => {
$(itemSelector, n).slice(hideFrom).hide();
});
}
// или
function hide(containerSelector, itemSelector, hideFrom) {
for (const n of document.querySelectorAll(containerSelector)) {
const items = n.querySelectorAll(itemSelector);
for (let i = hideFrom; i < items.length; i++) {
items[i].style.display = 'none';
}
}
}const marker = new ymaps.Placemark([ latitude, longitude ], {}, {
preset: 'islands#redHomeIcon',
});
map.geoObjects.add(marker);.section, внутренний - .section__item:class App extends React.Component {
state = {
cards: Array.from({ length: 7 }, (_, i) => ({
id: i + 1,
content: Math.pow(i, 3),
})),
}
addElem = () => {
this.setState(({ cards }) => ({
cards: [ ...cards, {
id: cards.length + 1,
content: Math.random().toString(16).slice(2),
} ],
}));
}
render() {
const { cards } = this.state;
const chunkLen = 3;
const chunks = Array.from(
{ length: Math.ceil(cards.length / chunkLen) },
(_, i) => cards.slice(i * chunkLen, (i + 1) * chunkLen)
);
return (
<div>
<button onClick={this.addElem}>add new element</button>
{chunks.map(n => (
<div className="section">
{n.map(m => (
<div className="section__item">
<a>#{m.id} {m.content}</a>
</div>
))}
</div>
))}
</div>
);
}
}В колонках где tbody я смог реализовать
<template slot="isActive" slot-scope="{ item }">
<b-form-checkbox v-model="item.isActive"></b-form-checkbox>
</template>но вот в thead не получается
true, если все чекбоксы true; сеттер - назначаете всем чекбоксам переданное значение:checkedAll: {
get() {
return this.items.every(n => n.isActive);
},
set(val) {
this.items.forEach(n => n.isActive = val);
},
},<template slot="HEAD_isActive" slot-scope="data">
<b-form-checkbox
@click.native.stop
:checked="checkedAll"
@change="checkedAll = $event"
></b-form-checkbox>
</template>add() {
const clone = this.clone.cloneNode(true);
clone.dataset.index = this.index++;
this.beforeInsert.before(clone);
}.filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у .material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого .material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.- .material-block .filter-values.open {
+ .material-block.open .filter-values {const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
const activeClass = 'open';$(document).on('click', ({ target: t }) => {
const $container = $(t).closest(containerSelector);
const $button = $(t).closest(buttonSelector);
if ($button.length) {
$container.toggleClass(activeClass);
}
$(containerSelector).not($container).removeClass(activeClass);
});document.addEventListener('click', ({ target: t }) => {
const container = t.closest(containerSelector);
const button = t.closest(buttonSelector);
if (button) {
container.classList.toggle(activeClass);
}
document.querySelectorAll(containerSelector).forEach(n => {
if (n !== container) {
n.classList.remove(activeClass);
}
});
});.expanded). Гуглите "делегирование".click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).
ни одно из вышеперечисленных условий симметричности не выполняется
$('.break-word').html((i, html) => {
const [ a, b, c ] = html.split(' ');
return `${a} ${b}<br>${c}`;
});document.querySelectorAll('.break-word').forEach(n => {
n.innerHTML = n.innerText.replace(/(.+ .+) /, '$1<br>');
});category.id === this.$route.params.category$route.params.category? И не получается ли так, что вы пытаетесь сравнивать значения разных типов? - скажем, category.id является числом, а params.category строкой.