[ 1, 2 ], например. Или [ 5, 6, 8, 9 ].const range = ([...arr]) => arr
.sort((a, b) => a - b)
.reduce((acc, n, i, a) => (
(n === a[i - 1] + 1) || acc.push([ n ]),
acc[acc.length - 1][1] = n,
acc
), [])
.map(([ a, b ]) => a === b ? a : `${a}-${b}`)
.join(', ');const range = arr => ''.concat(...arr
.slice()
.sort((a, b) => a - b)
.reduce((acc, n, i, a) => (
n !== a[i - 1] + 1 && acc.push(i ? `, ${n}` : n),
n === a[i - 1] + 1 && n !== a[i + 1] - 1 && acc.push(`-${n}`),
acc
), [])
);.media в дополнительный div, которому задайте стиль:.media > div {
display: flex;
}не давать снять последний чекбокс
function interval(arr, delay, callback) {
let i = ~-arr.length;
return arr.length
? setInterval(() => callback(arr[i], arr[i = -~i % arr.length]), delay)
: null;
}
// или
function interval(arr, delay, callback) {
let timeoutId = null;
arr.length && (function step(i) {
timeoutId = setTimeout(() => {
callback(arr[i++], arr[i %= arr.length]);
step(i);
}, delay);
})(arr.length - 1);
return () => clearTimeout(timeoutId);
}interval(
document.querySelectorAll('.banner-block'),
300,
(prev, curr) => {
prev.classList.remove('active');
curr.classList.add('active');
}
);interval, для первой версии передавать этот результат в clearInterval, а для второй вызвать его.
В документации написано, что данные передаваемые через provide/inject от родителя ребенку реактивны.
Note: theprovideandinjectbindings are NOT reactive.
$('.num').each(function() {
$({ value: 0 }).animate({ value: +$(this).text() }, {
duration: 1000,
easing: 'linear',
step: val => $(this).text(val.toFixed(2)),
});
});.item добавить data-атрибуты, указывающие, выбор какого типа осуществляется с помощью кнопок внутри (only - выбран может быть только один вариант вообще, one - выбран может быть только один вариант внутри данного .item, multiple - можно выбирать произвольное количество вариантов внутри данного .item):<div class="item" data-type="only">
<h2>Выбрать все категории</h2>
...
</div>
<div class="item" data-type="one">
<h2>Выбрать пол</h2>
...
</div>
<div class="item" data-type="multiple">
<h2>Выбрать тип одежды</h2>
...
</div>const containerSelector = '.filter';
const itemSelector = `${containerSelector} .item`;
const baseBtnSelector = 'button';
const btnSelector = `${itemSelector} ${baseBtnSelector}`;
const btnOnlySelector = `${itemSelector}[data-type="only"] ${baseBtnSelector}`;
const activeClass = 'active';
document.addEventListener('click', ({ target: t }) => {
const button = t.closest(btnSelector);
if (button) {
const toggle = n => n.classList.toggle(activeClass, n === button);
const item = button.closest(itemSelector);
const { type } = item.dataset;
item
.closest(containerSelector)
.querySelectorAll(type === 'only' ? btnSelector : btnOnlySelector)
.forEach(toggle);
if (type === 'multiple') {
button.classList.toggle(activeClass);
} else if (type === 'one') {
item.querySelectorAll(btnSelector).forEach(toggle);
}
}
});created() {
this.chooseChild = Object.values(this.parent)[0];
this.chooseS = Object.values(this.chooseChild)[0];
this.showinfo = Object.values(this.chooseS)[0];
},data: () => ({
selectedValues: [],
...computed: {
selectData() {
const options = [];
let { items } = this;
while (items instanceof Object) {
options.push(Object.keys(items));
items = items[this.selectedValues[options.length - 1]];
}
return {
options,
result: items || null,
};
},
},<div>
<select
v-for="(options, i) in selectData.options"
v-model="selectedValues[i]"
@input="selectedValues.length = i"
>
<option v-for="n in options">{{ n }}</option>
</select>
</div>
<div>SELECTED: <b>{{ selectData.result || '< NONE >' }}</b></div>created() {
let { items } = this;
while (items instanceof Object) {
const key = Object.keys(items)[0];
this.selectedValues.push(key);
items = items[key];
}
},range(length - 1, -1, -1)), а ещё лучше вообще не модифицируйте список, а создавайте новый:sentences = [ n for n in sentences if n ]
toggleDetails = (e) => {
e.preventDefault();
this.setState({ details: !this.state.details });
}function merge(nums1, m, nums2, n) {
for (let i = m + n, i1 = m - 1, i2 = n - 1; i--;) {
nums1[i] = i2 < 0 || nums1[i1] > nums2[i2] ? nums1[i1--] : nums2[i2--];
}
}function randomCall(items) {
const max = items.reduce((acc, n) => acc + n.ratio, 0);
return function(...args) {
const val = Math.random() * max;
for (let sum = 0, i = 0; i < items.length; i++) {
sum += items[i].ratio;
if (sum > val) {
return items[i].func.apply(this, args);
}
}
};
}
const func = randomCall([
{ func: func1, ratio: 1 },
{ func: func2, ratio: 2 },
{ func: func3, ratio: 3 },
{ func: func4, ratio: 4 },
]);function find(data, val) {
const values = data instanceof Object ? Object.values(data) : [];
return values.includes(val)
? data
: values.reduce((found, n) => found || find(n, val), null);
}
const obj = find(arrayData, 'myValue');function find(data, val) {
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (n instanceof Object) {
const values = Object.values(n);
if (values.includes(val)) {
return n;
}
stack.push(...values);
}
}
return null;
}.item, а не вложенные в него элементы:.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }.item не надо:$('#counter').on('input', e => {
$('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');
// или
const results = document.querySelector('#results');
const counter = document.querySelector('#counter');
counter.addEventListener('input', ({ target: { value } }) => {
results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));
// или
document.querySelector('#view').addEventListener('click', () => {
document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});