const classes = $buttons.get().map(n => n.dataset.set);
$buttons.click(function() {
$('.current').removeClass('current');
$(this).addClass('current');
$blocks.removeClass(classes.join(' ')).addClass(this.dataset.set);
});
let currentClass = null;
$buttons.click(function() {
$('.current').removeClass('current');
$(this).addClass('current');
const newClass = this.dataset.set;
$blocks.removeClass(currentClass).addClass(newClass);
currentClass = newClass;
});
class App extends React.Component {
state = {
data: [
'#088A85', '#0B2F3A', '#0B0B3B', '#2A0A29', '#B4045F',
'#FA58F4', '#A9BCF5', '#58FA82', '#A9F5F2', '#CED8F6',
].map((n, i) => ({
id: i + 1,
color: n,
title: `block #${i}`,
opened: false,
})),
}
updateItem(index, key, val) {
const data = [...this.state.data];
data[index][key] = val;
this.setState({ data });
}
render() {
return (
<div>{this.state.data.map(({ id, color, title, opened }, i) => (
<div key={id}>
<div
className="square"
style={{ backgroundColor: color }}
onClick={() => this.updateItem(i, 'opened', !opened)}
>
<p>{title}</p>
</div>
{opened &&
<div>
<input
value={color}
onChange={e => this.updateItem(i, 'color', e.target.value)}
/>
<input
value={title}
onChange={e => this.updateItem(i, 'title', e.target.value)}
/>
</div>}
</div>))}
</div>
)
}
}
.square {
width: 100px;
height: 100px;
}
.services_minus
. То есть, при клике на плюс не происходит вообще ничего, а минус - количество будет уменьшаться, и сразу же увеличиваться обратно..next('.services_nomer')
следует заменить на.closest('.services_button_block').find('.services_nomer')
parseInt
. Или можно оформить как одно выражение и поиск элемента с количеством и его обновление, передав в метод text
функцию, которая примет текущее содержимое элемента и должна будет вернуть новое:$('.services_minus').click(function() {
$(this)
.closest('.services_button_block')
.find('.services_nomer')
.text((i, text) => Math.max(0, text - 1));
});
$('.services_plus').click(function() {
$(this)
.closest('.services_button_block')
.find('.services_nomer')
.text((i, text) => +text + 1);
});
const interval = 5 * 60 * 1000 // 5 минут, ага
const x = moment(Math.ceil(moment() / interval) * interval).format('HH:mm:ss')
Почему я не могу сделать просто func(args) ?
Зачем нужно подставлять контекст?
func(...args)
. $elems.change(function() {
...
}).change();
function onChange() {
...
}
$elems.change(onChange).each(onChange);
class Game extends React.Component {
state = {
panesCurrent: [],
panesDefault: [ 1, 1, 1, 0, -1, -1, -1 ],
panesWin: [ -1, -1, -1, 0, 1, 1, 1 ],
}
componentDidMount() {
this.reset();
}
componentDidUpdate() {
if (this.state.panesCurrent.every((n, i) => n === this.state.panesWin[i])) {
setTimeout(alert, 25, 'WIN');
}
}
onClick(index) {
const clicked = this.state.panesCurrent[index];
if (clicked === 0) {
return;
}
for (let i = 1; i <= 2; i++) {
const t = index + clicked * i;
if (this.state.panesCurrent[t] === 0) {
const panes = [...this.state.panesCurrent];
[ panes[index], panes[t] ] = [ panes[t], panes[index] ];
this.setState({ panesCurrent: panes });
break;
}
}
}
reset = () => {
this.setState(({ panesDefault }) => ({
panesCurrent: [...panesDefault],
}));
}
render() {
return (
<div>
<button onClick={this.reset}>reset</button>
<div className="game">
{this.state.panesCurrent.map((n, i) => (
<div
className={'pane ' + [ 'left', '', 'right' ][n + 1]}
onClick={() => this.onClick(i)}
></div>
))}
</div>
</div>
)
}
}
.game {
font-size: 5px;
}
.pane {
display: inline-block;
width: 10em;
height: 10em;
margin: 1em;
}
.pane.right::after,
.pane.left::after {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-family: monospace;
font-size: 4em;
}
.pane.right::after {
content: "-->";
color: red;
border: 2px solid red;
}
.pane.left::after {
content: "<--";
color: lime;
border: 2px solid lime;
}
v-on:edit="editText($event, item)"
editText(operation, item) {
item.text = operation.api.origElements.innerHTML;
},
Можете подсказать что я делаю не так
deleteItem(id) {
this.setState(({ items }) => ({
items: items.filter(n => n.id !== id),
}));
}
class App extends React.Component {
state = {
items: [...this.props.items.map((n, i) => ({
id: i + 1,
value: n,
}))],
newItem: '',
search: '',
}
addItem = () => {
this.setState(({ items, newItem }) => ({
items: [ ...items, {
id: 1 + Math.max(0, ...items.map(n => n.id)),
value: newItem,
} ],
newItem: '',
}));
}
deleteItem(id) {
this.setState(({ items }) => ({
items: items.filter(n => n.id !== id),
}));
}
onChange = ({ target: { value, name } }) => {
this.setState(() => ({
[name]: value,
}));
}
render() {
const search = this.state.search.toLowerCase();
const filteredItems = this.state.items.filter(n => n.value.toLowerCase().includes(search));
return (
<div>
<div>
<input
value={this.state.newItem}
onChange={this.onChange}
name="newItem"
placeholder="Add..."
/>
<button onClick={this.addItem}>Добавить</button>
</div>
<div>
<input
value={this.state.search}
onChange={this.onChange}
name="search"
placeholder="Search..."
/>
</div>
<ul>
{filteredItems.map(n => (
<li key={n.id}>
{n.value}
<button onClick={() => this.deleteItem(n.id)}>Удалить</button>
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(
<App
items={[
'hello, world!!',
'fuck the world',
'fuck everything',
]}
/>,
document.getElementById('app')
);