const selects = [...document.querySelectorAll('select')];
const onChange = () =>
selects.forEach(function({ value, options: [...n] }) {
n.forEach(m => m.hidden = this(m.value) && value !== m.value);
}, Set.prototype.has.bind(new Set(selects.map(n => n.value))));
selects.forEach(n => n.addEventListener('change', onChange));function transposeTable(table) {
const headerCol = table.rows[0]?.cells[1]?.tagName === 'TH';
const content = Array.from(
table.rows,
tr => Array.from(tr.cells, td => td.innerHTML)
);
table.innerHTML = content[0]?.map((n, i) => `
<tr>${content.map((m, j) => (j = (headerCol ? j : i) ? 'td' : 'th', `
<${j}>${m[i]}</${j}>`)).join('')}
</tr>
`).join('') ?? '';
}function transposeTable(table) {
const cells = Array.prototype.reduce.call(table.rows, (acc, tr) => (
Array.prototype.forEach.call(tr.cells, (n, i) => (acc[i] ??= []).push(n)),
acc
), []);
table.replaceChildren();
cells.forEach(n => table.insertRow().append(...n));
}const weights = {
j: 11,
q: 12,
k: 13,
a: 14,
};
const isStraight = hand => hand
.map(n => weights[n] ?? +n)
.sort((a, b) => a - b)
.every((n, i, a) => !i || (n - a[i - 1] === 1));чекбокс.addEventListener('change', e => кнопка.disabled = !e.target.checked);Вроде делаю как в документации
get the Swiper instance in components inside of Swiper
import { ref } from 'vue';setup() {
const swiper = ref();
return {
swiper,
onSwiper: instance => swiper.value = instance,
...
};
},<swiper
@swiper="onSwiper"
...
>$('.elem_block').on('click', '.dell', function() {
$(this).closest('.block').addClass('fx_none');
$('.no-res').toggleClass('fx_none', !!$('.block:not(.fx_none)').length);
});document.addEventListener('click', e => {
const btn = e.target.closest('.dell');
if (btn) {
btn.closest('.block').classList.add('fx_none');
document.querySelector('.no-res').classList.toggle(
'fx_none',
!!document.querySelector('.block:not(.fx_none)')
);
}
});fx_none вырезаем.no-res и .elem_block добавляем общую обёртку, какой-нибудь <div class="container">.dell вместо добавления класса, скрывающего элементы, удаляем их по-настоящему:document.querySelectorAll('.dell').forEach(function(n) {
n.addEventListener('click', this);
}, e => e.target.closest('.block').remove());.no-res, если в .elem_block что-то есть:.container:has(.elem_block *) .no-res {
display: none;
}.no-res надо в том случае, если существует .block без класса, которые его скрывает:.container:has(.block:not(.fx_none)) .no-res {
display: none;
}import { Navigation } from 'swiper';.modules: [ Navigation ],.
const controls = document.querySelectorAll('.segmented-control');
controls.forEach(n => n.addEventListener('change', updatePillPosition));
window.addEventListener('resize', () => controls.forEach(n => updatePillPosition.call(n)));
function updatePillPosition() {
const inputs = [...this.querySelectorAll('.option input')];
const x = this.offsetWidth / inputs.length * inputs.findIndex(n => n.checked);
this.querySelector('.selection').style.transform = `translateX(${x}px)`;
}const SHOW_ON_LOAD = 3;
const SHOW_MORE = 2;
const items = [...document.querySelectorAll('.box-list__item')];
const button = document.querySelector('.show-more');
showItems(SHOW_ON_LOAD);
button.addEventListener('click', () => showItems(SHOW_MORE));
function showItems(count) {
items.splice(0, count).forEach(n => n.classList.add('ui-box-active'));
button.classList.toggle('ui-button-hidden', !items.length);
}const questions = [
{
text: 'Выберите верное утверждение',
answers: [
'СССР распался в 1997 году',
'Солнце вращается вокруг Земли',
'шестью восемь - двадцать три',
],
correctAnswer: 1,
},
{
text: '...',
answers: [ '...', '...', ... ],
correctAnswer: ...,
},
...
];function Question(props) {
const onChange = e => props.onAnswerChange(+e.target.value);
return (
<div>
<h3>{props.question.text}</h3>
<ol>
{props.question.answers.map((n, i) => (
<li>
<label>
<input
type="radio"
value={i}
checked={props.answer === i}
onChange={onChange}
/>
{n}
</label>
</li>
))}
</ol>
</div>
);
}function App(props) {
const [ answers, setAnswers ] = useState(Array(props.questions.length).fill(null));
const updateAnswer = (questionIndex, answer) =>
setAnswers(answers.map((n, i) => i === questionIndex ? answer : n));
return (
<div>
{props.questions.map((n, i) => (
<Question
question={n}
answer={answers[i]}
onAnswerChange={answer => updateAnswer(i, answer)}
/>
))}
</div>
);
}не получается сделать грамотную проверку правильного ответа...
const correctAnswersCount = answers.reduce((acc, n, i) => {
return acc + (n === questions[i].correctAnswer);
}, 0);...и одновременно вывести верные ответы
const correctAnswers = questions.map(n => n.answers[n.correctAnswer]);:readonly="`${item.isReadonly}`"false будет "false", а булевым эквивалентом любой непустой строки является true.
Есть поле desc
props: {
active: Boolean,
},data: () => ({
active: null,
}),<v-button
v-for="i in 3"
:active="active === i"
@click="active = active === i ? null : i"
>