0

У меня есть несколько checkbox. У каждого элемента есть несколько data-*. При активации любого checkbox к элементам, не имеющим заданный data-*, применяется стиль css(прозрачность). Нужно чтобы при активации последующих checkbox стиль применялся только к тем элементам, которые были "задействованы" в предыдущих checkbox (а значит имеют data-* уже активированного чекбокса) Каждый checkbox меняет стиль у элемента с определенным data-*.

Пример:

  1. checkbox 1 (меняет элементы без data-name=egg) активирован
    Все элементы не имеющие data-name=egg становятся полупрозрачными.
  2. checkbox 2 (меняет элементы без data-type=eat) активирован вторым
    Все элементы, не имеющие и data-name=egg и data-type=eat становятся полупрозрачными и.т.д
  3. checkbox 3 меняет элементы без data-crow=milk

подскажите пожалуйста хотя бы в каком направлении двигаться, искать информацию может быть будет оптимальнее сделать фильтр без data-*

2
  • если не data - тогда нужен обьект с теми-же данными -- который лучше создать сразу -- а так обходить все checkbox и проверять ключи обьекта на соответствие.
    – рони
    29 янв 2016 в 15:14
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 30 янв 2016 в 11:21

2 ответа 2

0

макет фильтр еды по составу инградиентов на jquery с генерацией элементов из обьекта данных

$(function() {
  function c() {
    d.forEach(function(a, e) {
      f.every(function(a, c) {
        return !a[0].checked || !!~b.item[e].indexOf(b.checkbox[c])
      }) ? $(a).removeClass("hide") : $(a).addClass("hide")
    })
  }
  var b = {
      checkbox: ["egg", "eat", "milk"],
      item: [
        ["egg", "eat", "milk"],
        ["milk", "eat"],
        ["egg"],
        ["egg", "eat"]
      ]
    },
    f = $.map(b.checkbox, function(a) {
      var b = $("<input/>", {
        type: "checkbox",
        click: c
      });
      $("<label/>").append(b).append(a).appendTo(".tabs");
      return b
    }),
    d = $.map(b.item, function(a) {
      a = a.join(" ");
      return $("<div/>", {
        text: a
      }).appendTo(".tabs")
    })
});
body {
  background-color: #D2691E;
}
.tabs div {
  width: 100px;
  height: 100px;
  float: left;
  background-color: #D3D3D3;
  margin: 8px;
}
.tabs div.hide {
  opacity: .2;
}
 input{
   margin-top: 40px
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs"></div>

тот же фильтр, но на js без jquery, для элементов существующих на странице

 window.addEventListener("DOMContentLoaded", function() {
   function b() {
     c.forEach(function(a, b) {
       e.every(function(a, c) {
         return !a.checked || !!~d.item[b].indexOf(d.checkbox[c])
       }) ? a.classList.remove("hide") : a.classList.add("hide")
     })
   }
   var d = {
       checkbox: ["egg", "eat", "milk"],
       item: [
         ["egg", "eat", "milk"],
         ["milk", "eat"],
         ["egg"],
         ["egg", "eat"]
       ]
     },
     e = [].map.call(document.querySelectorAll(".tabs input"), function(a) {
       a.addEventListener("click", b, !1);
       return a
     }),
     c = [].slice.call(document.querySelectorAll(".tabs div"))
 });
body {
  background-color: #D2691E;
}
.tabs div {
  width: 100px;
  height: 100px;
  float: left;
  background-color: #D3D3D3;
  margin: 8px;
}
.tabs div.hide {
  opacity: .2;
}
input {
  margin-top: 40px
}
<div class="tabs">
  <label>
    <input type="checkbox">egg</label>
  <label>
    <input type="checkbox">eat</label>
  <label>
    <input type="checkbox">milk</label>
  <div>egg eat milk</div>
  <div>milk eat</div>
  <div>egg</div>
  <div>egg eat</div>
</div>

0

У JQuery есть селектор not. Можно отключать все data-egg, такие что не data-milk вот так:

$("*[data-egg='']:not(*[data-milk=''])")

Демо

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.