function navFunction(id) {
for (const n of document.querySelectorAll('.dropdown2-content')) {
n.classList[n.id === id ? 'toggle' : 'remove']('show');
}
}
.dropdown2 .dropdown2-content {
display: none;
}
.dropdown2.show .dropdown2-content {
display: block;
}
const containerSelector = '.dropdown2';
const buttonSelector = `${containerSelector} .dropbtn2`;
const activeClass = 'show';
// делегирование, назначаем обработчик клика один раз для всех кнопок
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
document.querySelectorAll(containerSelector).forEach(function(n) {
n.classList[n === this ? 'toggle' : 'remove'](activeClass);
}, button.closest(containerSelector));
}
});
// или, назначаем обработчик клика каждой кнопке индивидуально
const onClick = function({ currentTarget: t }) {
this.forEach((n, i) => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass));
}.bind(document.querySelectorAll(containerSelector));
document.querySelectorAll(buttonSelector).forEach(n => {
n.addEventListener('click', onClick);
});
const RadioGroup = props => (
<div>
{props.items.map(n => (
<label className={`radio ${n.val == props.value ? 'selected' : ''}`}>
<input
type="radio"
name={props.name}
value={n.val}
checked={n.val === props.value}
onChange={props.onChange}
/>
<img src={n.img} />
</label>
))}
</div>
);
"true"
и true
. const inputSelector = '#icons_care';
const checkboxSelector = '.check_care';
const checkboxCheckedSelector = `${checkboxSelector}:checked`;
const dataAttr = 'icon';
const separator = ', ';
$(document).on('change', checkboxSelector, () => {
$(inputSelector).val($(checkboxCheckedSelector)
.get()
.map(n => $(n).data(dataAttr))
.join(separator)
);
});
// или
document.addEventListener('change', e => {
if (e.target.matches(checkboxSelector)) {
const input = document.querySelector(inputSelector);
const cb = document.querySelectorAll(checkboxCheckedSelector);
input.value = Array.from(cb, n => n.dataset[dataAttr]).join(separator);
}
});
const marker = new google.maps.Marker({
map: this.map,
title: place.name,
position: place.geometry.location,
});
google.maps.event.addListener(marker, 'click', () => {
this.infowindow.setContent(marker.title);
this.infowindow.open(this.map, marker);
});
this.markers.push(marker);
updateMap() {
if (this.polyline) {
this.polyline.setMap(null);
}
this.polyline = new google.maps.Polyline({
path: this.markers.map(n => n.getPosition()),
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: this.map,
});
},
document.getElementById('map') <...> document.getElementById('inputPlace')
const buttonSelector = '.button';
const blockSelector = '.div';
const activeClass = 'red';
const toggleBlock = (blocks, buttons, button) =>
buttons.forEach((n, i) => {
blocks[i].classList[n === button ? 'toggle' : 'remove'](activeClass);
});
// обработчик клика делегированный, назначается один раз
document.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);
toggleBlock(blocks, buttons, button);
}
});
// или, назначаем обработчик клика каждой кнопке индивидуально
const buttons = document.querySelectorAll(buttonSelector);
const blocks = document.querySelectorAll(blockSelector);
const onClick = e => toggleBlock(blocks, buttons, e.currentTarget);
buttons.forEach(n => n.addEventListener('click', onClick));
(1..height_result - 1).each do |n|
space_count = (height.to_i - n).abs
asterisk_count = height_result - space_count * 2 - 1
print " " * space_count + "*" * asterisk_count + "\n"
end
На основе этого значения надо менять результат внутри callback-функции передаваемой вторым параметром usort()
function array_sort(array &$arr, $key, $sort = 'asc') {
$sort = $sort === 'asc' ? 1 : -1;
usort($arr, function($a, $b) use($sort, $key) {
$a = $a[$key];
$b = $b[$key];
return $sort * ($a === $b ? 0 : $a > $b ? 1 : -1);
});
}
<div class="spinner"><div>
.spinner {
color: black;
font-size: 5rem;
}
.spinner::before {
display: inline-block;
text-align: center;
font-family: monospace;
width: 5rem;
content: "";
animation: spinner .8s infinite steps(4);
}
@keyframes spinner {
0%, 100% { content: "\2014"; }
25% { content: "\\"; }
50% { content: "|"; }
75% { content: "/"; }
}
<div class="spinner"><div>
.spinner {
color: black;
font-size: 5rem;
font-family: monospace;
}
const block = document.querySelector('.spinner');
const text = [ '\u2014', '\\', '|', '/' ];
let index = -1;
setInterval(() => {
index = (index + 1) % text.length;
block.textContent = text[index];
}, 200);
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<g font-size="60" font-family="monospace" fill="black" visibility="hidden">
<text x="30" y="60">
—
<animate attributeName="visibility" from="hidden" to="visible" begin="0.2s; hide4.begin" dur="0.2s" id="show1" />
<animate attributeName="visibility" from="visible" to="hidden" begin="show1.begin + 0.2s" dur="0.2s" id="hide1" />
</text>
<text x="30" y="60">
\
<animate attributeName="visibility" from="hidden" to="visible" begin="hide1.begin" dur="0.2s" id="show2" />
<animate attributeName="visibility" from="visible" to="hidden" begin="hide1.begin + 0.2s" dur="0.2s" id="hide2" />
</text>
<text x="30" y="60">
|
<animate attributeName="visibility" from="hidden" to="visible" begin="hide2.begin" dur="0.2s" id="show3" />
<animate attributeName="visibility" from="visible" to="hidden" begin="hide2.begin + 0.2s" dur="0.2s" id="hide3" />
</text>
<text x="30" y="60">
/
<animate attributeName="visibility" from="hidden" to="visible" begin="hide3.begin" dur="0.2s" id="show4" />
<animate attributeName="visibility" from="visible" to="hidden" begin="hide3.begin + 0.2s" dur="0.2s" id="hide4" />
</text>
</g>
</svg>
Vue.component('v-tooltip', {
template: `
<div class="wrp">
<div class="btn" @click="visible = !visible">{{ label }}</div>
<div class="tooltip" :class="{ visible }">{{ message }}</div>
</div>`,
props: {
label: {
type: String,
default: 'click me',
},
message: {
type: String,
default: 'hello, world!!',
},
},
data: () => ({
visible: false,
}),
});
Не используя ref.
@input="onInput($event, product)"
methods: {
onInput(e, product) {
product.quantity = Math.max(0, parseInt(e.target.value) || 0);
},
},
watch: {
products: {
deep: true,
handler() {
this.products.forEach(n => n.quantity = Math.max(0, parseInt(n.quantity) || 0));
},
},
},
<input class="date">
<input class="date">
<input class="date">
const yearButton = year => `
<button
data-year="${year}"
class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all"
>${year}</button>
`;
$('.date').datepicker({
showButtonPanel: true,
}).each(function(i) {
$(this).datepicker(
'option',
'currentText',
`Today ${yearButton(2015 + i * 2)}${yearButton(2015 + i * 2 + 1)}`
);
});
$(document).on('click', '[data-year]', function() {
$.datepicker._curInst.input.datepicker('setDate', `01/01/${$(this).data('year')}`);
});