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){
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 3

你走在正确的轨道上，但你似乎正在将“事件全部”传递给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 4

这是我给你的解决方案。我更改了您的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时发现Visual jQuery非常宝贵：http://api.jquery.com/visual/

Answer 5

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

Answer 6

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

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

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

6 个答案: