jquery:基于类名的变量隐藏/显示

Question

我是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');
}

任何帮助将不胜感激!

Answer 1

以下是如何执行此操作的示例.

http://jsfiddle.net/YnFWX/1/

我没有使用图像,但你会得到这个想法.请注意,我没有使用'onclick'事件分配javascript.如果你通过jQuery做得更清洁.

希望这能让你开始.

短发