$(document).on('click', function(e) {
e.preventDefault();
const $submenu = $(e.target).closest('li').children('.submenu');
$submenu.fadeToggle();
$('.nav li ul').not($submenu).fadeOut();
});
кастомные свойства для иконки прописал...
function mul(start, end) {
let result = 1;
for (let i = start; i <= end; i++) {
result *= i;
}
return result;
}
function choose(n, k) {
return n > k
? Math.round(mul(n - k + 1, n) / mul(2, k))
: +(n === k);
}
const table = document.querySelector('здесь селектор вашей таблицы');
const idAttr = 'id-object';
const propAttr = 'object-name';
const data = Array.prototype.reduce.call(
table.querySelectorAll('table tbody tr'),
(acc, tr) => (
tr.querySelectorAll(`[${propAttr}]`).forEach(function(td) {
this[td.getAttribute(propAttr)] = td.innerText;
}, acc[tr.querySelector(`[${idAttr}]`).getAttribute(idAttr)] = {}),
acc
),
{}
);
// или
const data = {};
for (const { rows } of table.tBodies) {
for (const { cells } of rows) {
const item = data[cells[0].attributes[idAttr].value] = {};
for (let i = 1; i < cells.length; i++) {
const td = cells[i];
item[td.attributes[propAttr].value] = td.textContent;
}
}
}
const className = 'skiptranslate';
.for (const { childNodes: n } of document.getElementsByClassName(className)) {
for (let i = n.length; i--;) {
if (n[i].nodeType === Node.TEXT_NODE) {
n[i].remove();
}
}
}
document.querySelectorAll(`.${className}`).forEach(n => {
const nodes = [...n.children];
n.innerHTML = '';
n.append(...nodes);
});
data: { circle: document.querySelector(`.circle`) },
.app
Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть специальный механизм. Т.е., добавляете атрибут ref элементу .circle
:<div class="circle" ref="circle"></div>
this.circle
на this.$refs.circle
:this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;
data: () => ({
coords: [ 0, 0 ],
}),
computed: {
style() {
return {
left: this.coords[0] + 'px',
top: this.coords[1] + 'px',
};
},
},
created() {
document.addEventListener('mousemove', e => this.coords = [ e.pageX, e.pageY ]);
},
<div class="circle" :style="style"></div>
function setVal(obj, path, val) {
const keys = path.split('.');
const key = keys.pop();
keys.reduce((p, c) => p[c] = p[c] || {}, obj)[key] = val;
return obj;
}
function replaceObjWithArr(obj) {
if (obj instanceof Object) {
const keys = Object.keys(obj).sort((a, b) => a - b);
obj = keys.every((n, i) => +n === i) ? keys.map(n => obj[n]) : obj;
keys.forEach(n => obj[n] = replaceObjWithArr(obj[n]));
}
return obj;
}
const output = replaceObjWithArr(Object
.entries(input)
.reduce((acc, n) => setVal(acc, ...n), {})
);
state: State<T> = {
selectedItems: []
}
renderListItem: ({ item: T }) => T = ({ item }) => {
return item;
}
const ChildComponent = (props) => (
<div
className={`childComponent ${props.isActive ? 'active' : ''}`}
onClick={props.onClick}
data-id={props.id}
>
<h3>{props.text}</h3>
</div>
);
const ParentComponent = ({ items }) => {
const [ active, setActive ] = React.useState(null);
const onClick = e => setActive(+e.currentTarget.dataset.id);
// или
// const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);
return (
<div>
{items.map(n =>
<ChildComponent
key={n.id}
onClick={onClick}
isActive={n.id === active}
{...n}
/>
)}
</div>
)
};
ReactDOM.render(
<ParentComponent
items={[
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
]}
/>,
document.getElementById('root')
);
*-enter-active
, *-leave-active
и т.д. анимируются удаляемые/добавляемые элементы. Если key не изменился, элемент не будет удалён и заново добавлен, соответственно, и классы не будут добавляться. <button value="
---> <button data-value="
.document.addEventListener('click', ({ target: { dataset: { value } } } ) => {
if (value) {
document.querySelector(`[name="size"][value="${value}"]`).click();
}
});
const radios = [...document.querySelectorAll('[name="size"]')];
const buttons = [...document.querySelectorAll('button')];
// можно смотреть на значение data-атрибута
const onClick = e => radios.find(n => n.value === e.target.dataset.value).click();
// или, кликать радиокнопку с тем же индексом, что и у кнопки обычной
const onClick = e => radios[buttons.indexOf(e.target)].click();
buttons.forEach(n => n.addEventListener('click', onClick));
<Body tmp={this.state.body.json.result} />
{this.props.tmp.map(n => <div key={n._id}>{n.name}</div>)}