$k = array_keys($arr);
$v = array_values($arr);
sort($k);
sort($v);
$arr = array_combine($k, $v);const items = [
{ id: ..., title: '...', img: '...' },
{ id: ..., title: '...', img: '...' },
...
];function Slider({ items }) {
const [ active, setActive ] = React.useState(0);
const { length, [active]: slide } = items;
const next = e => setActive((active + +e.target.dataset.step + length) % length);
const goTo = e => setActive(+e.target.dataset.index);
return (
<div>
<div className="slideshow-container">
<div className="mySlides fade">
<div className="numbertext">{active + 1} / {length}</div>
<img src={slide.img} />
<div className="text">{slide.title}</div>
</div>
<a className="prev" onClick={next} data-step={-1}>❮</a>
<a className="next" onClick={next} data-step={+1}>❯</a>
</div>
<div className="dots">
{items.map((n, i) => (
<span
key={n.id}
className={`dot ${i === active ? 'active' : ''}`}
onClick={goTo}
data-index={i}
></span>
))}
</div>
</div>
);
}animation-delay. Или поверните .container через transform: rotate.
const selectors = {
wrapper: '.numberQut',
input: '.qut',
minus: '.minusQus',
plus: '.plusQus',
};
const limits = {
min: 1,
max: 5,
};
const updateValue = (el, change = 0) =>
el.value = Math.min(limits.max, Math.max(limits.min, (parseInt(el.value) || 0) + change));
document.addEventListener('click', ({ target: t }) => {
const change = +t.matches(selectors.plus) || -t.matches(selectors.minus);
if (change) {
updateValue(t.closest(selectors.wrapper).querySelector(selectors.input), change);
}
});
document.addEventListener('input', ({ target: t }) => {
if (t.matches(selectors.input)) {
updateValue(t);
}
});function App() {
const [ count, setCount ] = useState(3);
const updateCount = ({ target: { dataset: { change } } }) =>
setCount(Math.max(0, count + +change));
const refs = useRef([]);
const logRefs = () => console.log(refs.current);
useEffect(() => {
refs.current.length = count;
}, [ count ]);
return (
<div>
<button onClick={updateCount} data-change={-1}>-</button>
{count}
<button onClick={updateCount} data-change={+1}>+</button>
<button onClick={logRefs}>log refs</button>
{Array.from({ length: count }, (n, i) => (
<div ref={el => refs.current[i] = el}>
{Math.random() * 1000 | 0}
</div>
))}
</div>
);
}<label v-for="f in filters">
<input type="checkbox" v-model="f.checked">
{{ f.name }}
</label>computed: {
filteredFood() {
const filters = this.filters.filter(n => n.checked).map(n => n.code);
return this.meatFood.filter(n => filters.some(f => n[f]));
},
},При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту...
Object.values(arr.reduce((acc, n) => {
const date = n.date.split(' ', 1)[0];
(acc[0][date] = acc[0][date] || { id: ++acc[1], date, docs: [] }).docs.push(n);
return acc;
}, [ {}, 0 ])[0])[...arr.reduce((acc, n) => {
const [ date ] = n.date.match(/\S+/);
acc.set(date, acc.get(date) || { id: -~acc.size, date, docs: [] }).get(date).docs.push(n);
return acc;
}, new Map).values()]item.object вместо listItem.object.
let show = 1;
function sh() {
const [ display, text ] = [ [ 'none', 'Развернуть' ], [ 'block', 'Свернуть' ] ][show ^= 1];
[...document.querySelectorAll('.list-row')].slice(3).forEach(n => n.style.display = display);
document.querySelector('#button').textContent = text;
}
window.addEventListener('load', sh);function walk(node) {
if (node) {
console.log(node);
walk(node.next);
}
}function walk(node) {
while (node) {
console.log(node);
node = node.next;
}
}.tags li.hidden {
display: none;
}document.querySelectorAll('.tags b').forEach(n => {
n.closest('li').classList.add('xxx');
n.addEventListener('click', onClick);
});
function onClick(e) {
for (
let el = e.target.closest('li');
(el = el.nextElementSibling) && !el.classList.contains('xxx');
el.classList.toggle('hidden')
) ;
}.active {
height: 300px;
cursor: pointer;
background-color: green;
overflow: auto;
}$('.qwerty').on('click', function() {
$(this).toggleClass('active');
});data: () => ({
selectedTypes: [],
...
}),
computed: {
types() {
return [...new Set(this.items.map(n => n.type))];
},
...
},<template v-for="n in types">
<input type="checkbox" :value="n" v-model="selectedTypes" :id="n">
<label :for="n">{{ n }}</label>
</template>computed: {
filteredItems() {
const types = this.selectedTypes;
return this.items.filter(n => types.includes(n.type));
},
...
},<figure v-for="n in filteredItems">
<img :src="n.src" alt="">
</figure>Сделал немного иначе, работает, но использовал два шаблона, вместо одного
https://jsfiddle.net/madeas/s47gqbaz/5/
checked === false.