Пушу в массив айтем и хочу затем проверять, если он в массиве уже есть, то...
return {
...state,
items: state.items.includes(action.payload)
? state.items.filter(n => n !== action.payload)
: [ ...state.items, action.payload ],
};
const index = state.items.indexOf(action.payload);
if (index === -1) {
state.items.push(action.payload);
} else {
state.items.splice(index, 1);
}
<script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>
<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>
const sum = elements =>
Array.prototype.reduce.call(
elements,
(acc, n) => acc + (+n.value || 0),
0
);
const $form = $('form').on('change', 'select', () => {
$('input').val(sum($form.find('select')));
});
const input = document.querySelector('input');
const selects = document.querySelectorAll('form select');
const onChange = () => input.value = sum(selects);
selects.forEach(n => n.addEventListener('change', onChange));
document.querySelector('form').addEventListener('change', function(e) {
if (e.target.tagName === 'SELECT') {
document.querySelector('input').value = sum(this.getElementsByTagName('select'));
}
});
let checked = null;
$('input').click(function() {
checked = checked === this.value ? null : this.value;
this.checked = !!checked;
});
// или
document.querySelectorAll('input').forEach(function(n) {
n.addEventListener('click', this);
}, function({ target: t }) {
t.checked = !!(this[0] = this[0] === t ? null : t);
}.bind([]));
const $checkboxes = $('input').change(function() {
if (this.checked) {
$checkboxes.not(this).prop('checked', false);
}
});
// или
const checkboxes = document.querySelectorAll('input');
const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
checkboxes.forEach(n => n.addEventListener('change', onChange));
const sum5 = (...args) =>
args.length > 4
? args.slice(0, 5).reduce((acc, n) => acc + n, 0)
: sum5.bind(null, ...args);
// или
// : (...args2) => sum5(...args, ...args2);
const selects = [...document.querySelectorAll('select')];
const onChange = () =>
selects.forEach(function({ value, options: [...n] }) {
n.forEach(m => m.hidden = this.includes(m.value) && value !== m.value);
}, selects.map(n => n.value));
selects.forEach(n => n.addEventListener('change', onChange));
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)')
);
}
});
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]);