我对 jQuery 很陌生,需要一些过滤类的帮助。用户可以从九个按钮中选择要显示/隐藏的事件类型。单击一种颜色,仅显示具有该颜色的事件,其余事件则隐藏。单击“全部”,所有事件都会显示,没有隐藏的事件。所有事件均以 display:block
开始。
控制按钮示例:
<li class="all" id="all-events"><a href="#" onclick="showEvents('event-all')">
<img src="swatch-all.png" alt="" /></a></li>
<li class="red" id="red-events"><a href="#" onclick="showEvents('event-red')">
<img src="swatch-red.png" alt="" /></a></li>
<li class="blue" id="blue-events"><a href="#" onclick="showEvents('event-blue')">
<img src="swatch-blue.png" alt="" /></a></li>
事件由 php 从数据库中提取,如下例所示:
<div id="bigCal">
<p class="all"><a href="http://foo.com" title="All event">All events</a></p>
<p class="blue"><a href="http://bar.com" title="Blue event">Blue event</a></p>
<p class="red"><a href="http://foobar.com" title="Red event">Red event</a></p>
</div>
我已经研究 jQuery 两天了!不确定是否使用 .filter 或 .hasClass 或 .is 。这些都不起作用。我尝试过的最简单的是:
function showEvents(color) {
($('p').hasClass(color)) ? this.style.display="block" : this.style.display="none";
}
另一个什么也没做的尝试是
function showEvents(color){
$("p[className*='event-']").css('display', 'none');
$("p[className=color]").css('display', 'block');
if ($("p[className='event-all']"))
$("p[className*='event-']").css('display', 'block');
}
任何帮助将不胜感激!
最佳答案
以下是如何执行此操作的示例。
我没有使用图像,但你会明白的。请注意,我没有使用“onclick”事件分配 javascript。如果您通过 jQuery 来完成,会更干净。
希望这能让您开始。
鲍勃
关于jquery:根据类名变量隐藏/显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4480321/