const className = 'dropdown-trigger';
const key = 'target';
const attr = `data-${key}`;const elems = document.querySelectorAll(`.${className}`);
// или
const elems = document.getElementsByClassName(className);const getAttr = el => el.dataset[key];
// или
const getAttr = el => el.getAttribute(attr);
// или
const getAttr = el => el.attributes[attr].value;const attrs = Array.from(elems, getAttr);
// или
const attrs = Array.prototype.map.call(elems, getAttr);
// или
const attrs = [];
for (const n of elems) {
attrs.push(getAttr(n));
}
// или
const attrs = [];
for (let i = 0; i < elems.length; i++) {
attrs[i] = getAttr(elems[i]);
}
// или
const attrs = (function get(i, n = elems.item(i)) {
return n ? [ getAttr(n), ...get(i + 1) ] : [];
})(0);Это что-то вроде пагинации.
const currPathIndex = paths.findIndex(n => n.link === location.pathname);
const isPrev = currPathIndex !== 0;
const isNext = currPathIndex !== paths.length - 1;const onClick = e =>
history.push(paths[currPathIndex + +e.target.dataset.step].link);<button disabled={!isPrev} data-step={-1} onClick={onClick}>PREV</button>
<button disabled={!isNext} data-step={+1} onClick={onClick}>NEXT</button>{isPrev && <NavLink to={paths[currPathIndex - 1].link}>PREV</NavLink>}
{isNext && <NavLink to={paths[currPathIndex + 1].link}>NEXT</NavLink>}почему он может не перерисовывается когда данные поступают?
.length где-то здесь:Object.keys(this.props.landingState) > 0const className = 'class';
const index = 1;const element = document.querySelector(`.${className}:nth-child(${index + 1})`);const element = document.querySelectorAll('.' + className)[index];
// или
const element = document.getElementsByClassName(className).item(index);есть пример локализации, но он по структуре элементов не похож на мой пример поэтому у меня не получается им воспользоваться
map.setBounds(map.geoObjects.getBounds())
function f({ a, b, c }) {
console.log(a, b, c);
}
f({ b: 9, c: 5 }); // undefined 9 5function f({ a = 1, b = 2, c = 3 } = {}) {
console.log(a, b, c);
}
f({ a: 100, c: 300 }) // 100 2 300
f({ b: -1 }) // 1 -1 3
f() // 1 2 3
f({ a: 0, b: 0, c: 0 }) // 0 0 0&:hover + .block .circle-1&:hover ~ .block .circle-1.hover {
...
.text {
...
$hover-colors: red, green, blue;
@for $i from 1 through length($hover-colors) {
&:nth-child(#{$i}):hover ~ .block .circle:nth-child(#{$i}) {
background: nth($hover-colors, $i);
}
}onMouseDown(e) {
e.preventDefault();
}onMouseDown={this.onMouseDown}
Почему выдает фрагмент слова?
\b, обозначающий границы слов, но он в данном случае неприменим, поскольку у вас тут кириллические символы. Можно представить границу слова как начало строки или пробельный символ или конец строки. Типа так:str.match(/(^|\s)[бвгджзк][аяеэюуёоиы]+[бвгджзк][а-яё]*($|\s)*?/gi).map(n => n.trim())function getMinSum(arr, n) {
let sum = 0;
let minSum = 0
let index = 0;
for (let i = 0; i < n; sum += arr[i++]) ;
minSum = sum;
for (let i = n; i < arr.length; i++) {
sum -= arr[i - n] - arr[i];
if (sum < minSum) {
minSum = sum;
index = i - n + 1;
}
}
return {
sum: minSum,
seq: arr.slice(index, index + n),
};
}onClick={ this.setState({isOpen: !this.state.isOpen}) }
$('body').append('\<script\>alert(123)\</script\>');const script = document.createElement('script');
script.innerText = 'alert(123)';
document.body.appendChild(script);document.body.append(document
.createRange()
.createContextualFragment('<script>alert(123)</script>')
);todos: [
{ open: false, ... },
{ open: false, ... },
...
],@click="todo.open = !todo.open":class="{ 'dropdown-active': todo.open }"
function transfer(from, to) {
$(from).on('click', 'button', function(e) {
const $el = $(e.target).parent();
const index = +$el.data('index');
const indices = $('li', to).get().map(n => +n.dataset.index);
if (index < indices[0] || !indices.length) {
$(to).prepend($el);
} else if (index > indices[indices.length - 1]) {
$(to).append($el);
} else {
$(`${to} [data-index="${indices.filter(n => n < index).pop()}"]`).after($el);
}
});
}
transfer('#parent1', '#parent2');
transfer('#parent2', '#parent1');<div class="box">
<div class="inbox1"></div>
<div class="inbox2"></div>
</div>.box {
display: flex;
}
.inbox1,
.inbox2 {
width: 100px;
height: 100px;
border-radius: 100%;
transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.inbox1 {
background: red;
transition-delay: 0ms;
}
.inbox2 {
background: green;
transition-delay: 200ms;
}
.box:hover .inbox1 {
transform: translate(200px, 0);
transition-delay: 200ms;
}
.box:hover .inbox2 {
transform: translate(200px, 0);
transition-delay: 0ms;
}Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно.
You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.