const key = 'value';
const attr = `data-${key}`;
const selector = `[${attr}]`;
const $el = $(selector);
// или
const el = document.querySelector(selector);
const str = $el.data(key);
// или
const str = $el.attr(attr);
// или
const str = el.dataset[key];
// или
const str = el.getAttribute(attr);
// или
const str = el.attributes[attr].value;
const arr = str.split(',');
// или
const arr = str.match(/\d+/g) || [];
// или
const arr = str.split(/\D/);
// или
const arr = JSON.parse(`[${str}]`); // вместо строк тут будут числа
// или
const arr = eval('[' + str + ']'); // и тут тоже числа
.modal-close
не нужен - его убираем; добавляем проверку, кем является целевой элемент:$('.modal-window').click(function(e) {
if (e.target.matches('.modal-window, .modal-close')) {
$(this).hide();
}
});
const container = document.querySelector('.dots-wrapper');
const tag = 'div';
const className = 'dot';
const count = 10;
const elementHTML = `<${tag} class="${className}"></${tag}>`;
const elementsHTML = Array(count).fill(elementHTML).join('');
// или
const elementsHTML = Array(count + 1).join(elementHTML);
// или
const elementsHTML = elementHTML.repeat(count);
container.innerHTML = elementsHTML;
// или
container.insertAdjacentHTML('beforeend', elementsHTML);
for (let i = 0; i < count; i++) {
const element = document.createElement(tag);
element.classList.value = className;
container.insertAdjacentElement('beforeend', element);
}
while (container.children.length < count) {
const element = document.createElement(tag);
element.classList.add(className);
container.appendChild(element);
}
const element = document.createElement(tag);
element.className = className;
container.append(...Array.from({ length: count }, () => element.cloneNode()));
И здесь idUser не работает, только после перезагрузки страницы.
this.$router.push({name: 'feed'})
следует выполнять в колбеке запроса получения данных пользователя.Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.
<div class="app">
<div class="plain"></div>
</div>
.app {
width: 200px;
height: 200px;
overflow: scroll;
}
.plain {
width: 1000px;
height: 1000px;
background: linear-gradient(135deg, red, blue);
}
let x = null;
let y = null;
document.querySelector('.app').addEventListener('mousemove', function(e) {
if (e.buttons) {
if (typeof x === 'number') {
this.scrollLeft += (x - e.layerX) * 3;
this.scrollTop += (y - e.layerY) * 3;
}
x = e.layerX;
y = e.layerY;
} else {
x = y = null;
}
});
v-for
. Слушать событие change, по которому выставлять состояния предыдущих чекбоксов (относительно того, на котором событие случилось) в true, следующих в false:data: () => ({
checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
onChange(e, index) {
const checked = e.target.checked;
this.checked = [
...Array(index + checked).fill(1),
...Array(this.checked.length - index - checked).fill(0),
];
},
},
<li v-for="(n, i) in checked">
<label>
<input
type="checkbox"
:checked="n"
@change="onChange($event, i)"
>
{{ i + 1 }}
</label>
</li>
а если несколько таких списков будет
function throttle(f, delay) {
let lastCall = -Infinity;
return function() {
const now = +new Date;
if (now - lastCall > delay) {
lastCall = now;
return f.apply(this, arguments);
}
};
}
setTimeout(function() {
console.log(this.resorts.join(', '));
}.bind(this), delay);
var that = this;
setTimeout(function() {
console.log(that.resorts.join(', '));
}, delay);
<button data-block="block-one">69</button>
<button data-block="block-two">187</button>
<button data-block="block-three">666</button>
<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>
$('body').on('click', 'button', function() {
const $block = $(`.${this.dataset.block}`).toggleClass('show');
$('.block').not($block).removeClass('show');
});
// или
document.addEventListener('click', ({ target: { dataset: { block } } }) => {
if (block) {
document.querySelectorAll('.block').forEach(({ classList: cl }) => {
cl[cl.contains(block) ? 'toggle' : 'remove']('show');
});
}
});
<button class="button">69</button>
<button class="button">187</button>
<button class="button">666</button>
<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>
const $blocks = $('.block');
const $buttons = $('.button').click(function() {
const $block = $blocks.eq($buttons.index(this)).toggleClass('show');
$blocks.not($block).removeClass('show');
});
// или
const blocks = document.querySelectorAll('.block');
const buttons = document.querySelectorAll('.button');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const index = Array.prototype.indexOf.call(buttons, this);
blocks.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove']('show'));
}
fs.open(fname, 'a', (err, file_handle) => {
if (!err)
this.file_handle = file_handle;