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来做更清洁。

希望这能让你开始。

鲍勃

Answer 2

function showEvents(color){ 
if(color=='event-all'){ 
    $('p').css('display','block'); 
}else{ 
    $('p').css('display','none'); 
    $('p.'+color.replace('event-','')).css('display','block'); 
} 
} 

Answer 3

function showEvents(color){ 
var csscol=color.split('-')[1];//will return red/blue/all from event-red/event-blue/event-all 
$('p[class!=' + csscol + ']').hide(); //hide all not equal to csscol 
$('p[class=' + csscol + ']').show(); //show all equal to csscol 
} 

Answer 4

你在正确的轨道上，但你似乎路过“事件的所有”变成showEvents，而不只是“所有”。

所以，如果你改变你的onclick代码为showEvents('all'), showEvents('blue')，等等......它应该工作。

但是，我会采取不同的方式。这是更容易在第一时间使用jQuery来分配你的onclick处理，并找出被点击了这个处理器内的<li>观察类的，而不是将它的颜色。

// The is the same as onclick=.... but for ALL <a> elements within an <li> 
$("li > a").click(function() { 

    // Find the color that was clicked 
    var color = $(this).parent().attr("class"); 

    // "All" is a special case 
    if (color == "all") { 
     // Show all <p>s in div with ID "bigCal" 
     $("#bigCal p").show(); 
    } else { 
     // Hide all <p>s in div with ID "bigCal" 
     $("#bigCal p").hide(); 

     // Show the <p> with the same class 
     $("#bigCal p." + color).show(); 
    } 

}); 

Answer 5

function showEvents(color){ 
    $(p["class^='event-'"]).each(function() { 
     if(!this.hasClass(color))this.hide();//or .css(display:none;) 
     else {this.show()}; 
}) 

我认为这应该是解决方案，如果我正确地理解你的问题。 FJ

Answer 6

这是我给你的解决方案。我改变了你的onclick调用，以反映你的课程的实际名称。

的Javascript

function showEvents(color) { 
     if(color!='all') 
     { 
      jQuery('#bigCal > p').hide(); 
      jQuery('.'+color).show(); 
     } 
     else{jQuery('#bigCal > p').show();} 
     } 

HTML

<ul> 
     <li class="all" id="all-events"> 
     <a href="#" onclick="showEvents('all')">Show All</a> 
     </li> 
     <li class="red" id="red-events"> 
     <a href="#" onclick="showEvents('red')">Show Red</a> 
     </li> 
     <li class="blue" id="blue-events"> 
     <a href="#" onclick="showEvents('blue')">Show Blue</a> 
     </li> 
    </ul> 
    <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的非常宝贵的，而我正在学习jQuery的：http://api.jquery.com/visual/