JQuery混淆

Question

I试图使用复选框和JQuery筛选日历上的事件，

$(document).ready(function () {
  $('.scrollable-menu :checkbox').click(function (){
    if ($('input:checkbox:checked').length) {
      $('.alert').hide();
      $('.more').hide();
    }
  })
});

这就是我现在所拥有的，我知道它并不多。这很好，但是从这里开始，我需要它来选择具有特定背景色的li.alerts。

$('div[style~="backgroundColor: red;"]').show()

但是每个事件都有不同的背景颜色，所以这需要改变我在复选框中存储颜色的方式。我还需要脚本允许同时选中多个复选框。

        {% for category in categories %}
            <li name="{{category.color}}"><input name="{{category.color}}" value="your_value" type="checkbox"><div style="color:#{{category.color}};">{{ category.name }}{{ category.color }}</div></li>
        {% endfor %}

Answer 1

而不是按CSS样式选择(如果您更改颜色怎么办？)将一些特定的类应用于元素并使用它们。

$('.jobs.main').show();
$('.jobs.secundary').hide();
$('.meetings, .jobs').show();
[...]

使用类进行筛选的示例：

​

$(document).ready(function() {
  $('input[type="checkbox"]').change(function() {
    var filters = $('input[type="checkbox"]:checked');

    if (filters.length) {
      $('.event').hide();
      $('input[type="checkbox"]:checked').each(function() {
        $('.event.' + $(this).data('type')).show();
      });
    } else {
      $('.event').show();
    }
  });
})

.job {
  color: red;
}
.meeting {
  color: blue;
}
.job.meeting {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event meeting job">Job Meeting</div>
<div class="event job">Important job</div>
<div class="event meeting">Meeting with client</div>
<div class="event call">Call to client</div>
<hr/>Filter:
<br/>
<label>
  <input type="checkbox" data-type="job" />Jobs
</label>
<label>
  <input type="checkbox" data-type="call" />Calls
</label>
<label>
  <input type="checkbox" data-type="meeting" />Meetings
</label>

​