gpt4 book ai didi

javascript - jQuery 困惑

转载 作者:行者123 更新时间:2023-12-02 14:18:32 28 4
gpt4 key购买 nike

我尝试使用复选框和 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 %}

最佳答案

不要通过 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>

关于javascript - jQuery 困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38849489/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com