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 you have read our privacy policy.

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