@Bylex

Как скрыть дубли строк при нескольких checked?

При выбранном checkbox, скрываются/показываться ссылки в price-problem, с привязкой. Выбрано может быть несколько чекбоксов, соответственно нужно показывать все выбранные, скрывать все не выбранные, что код ниже и делает. Выбираем "Не стирает, мигает" - скрываются в price-problem "Течет", остальные показываются. Но так как checked, может быть несколько, необходимо скрывать дубли.

Подскажите как скрыть дубли? Выбираем "Не стирает, Мигает". Появиться дубли, 2 раза "Не стирает". Вот как в таком случае скрыть дубли при двойном checkbox? На каждый тип может быть свой набор проблем с дублирующими строками.

Не морозит (Замена компрессора,Замена терморегулятора,Замена термостата,Замена реле)
Покрывается льдом (Замена испарителя,Замена терморегулятора,Замена испарителя)
Работает только морозилка (Замена терморегулятора,Замена компрессора, Замена терморегулятора)
Перемораживает (Замена компрессора,Замена термостата)

<script>
$(function() {
$('.problem').change(function({ target: t }) {
  const { type, problem } = t.dataset;
  $(`a[data-type="${type}"][data-problem="${problem}"]`).toggle(t.checked);
}).find('input').change();
});
</script>


<div class="remont">
<div class="problem">
<input data-type="Стиральная машина" data-problem="Не стирает" type="checkbox" value="Не стирает">
<input data-type="Стиральная машина" data-problem="Мигает" type="checkbox" value="Мигает">
<input data-type="Стиральная машина" data-problem="Течет" type="checkbox" value="Течет">
</div>

<div class="price-problem">
<a data-type="Стиральная машина" data-problem="Не стирает" href="#" class="price__item">Сломалась</a>
<a data-type="Стиральная машина" data-problem="Мигает" href="#" class="price__item">Сломалась</a>
<a data-type="Стиральная машина" data-problem="Течет" href="#" class="price__item">Течет</a>
</div>

</div>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Избавьтесь от них. А значения data-атрибутов объедините, например, вместо

<a data-problem="value1">
<a data-problem="value2">

пусть будет

<a data-problem="value1|value2">

И проверяйте наличие хотя бы одного из выбранных значений внутри этих строк:

$('.problem').change(function() {
  const problems = $(':checked', this)
    .get()
    .map(({ dataset: { type, problem } }) => ({ type, problem }));

  $(this)
    .closest('.remont')
    .find('.price__item')
    .hide()
    .filter((i, { dataset: d }) =>
      problems.some(p => d.type === p.type && d.problem.includes(p.problem))
    )
    .show();
}).change();
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы