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

【问题标题】：jquery: hide/show based on variable for class namejquery：基于类名的变量隐藏/显示
【发布时间】：2010-12-18 21:41:48
【问题描述】：

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

任何帮助将不胜感激！

【问题讨论】：

标签： jquery class filter show-hide

【解决方案1】：

这是一个如何执行此操作的示例。

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

我没有使用图像，但你会明白的。请注意，我没有通过使用“onclick”事件来分配 javascript。如果你通过 jQuery 来做会更干净。

希望这能让你开始。

鲍勃

【讨论】：

太棒了！通过将“all”类添加到每种颜色（class="all red"），可以轻松显示所有颜色。这让我完全被难住了——如何轻松获得所有其他课程。谢谢！另外学习 jsfiddle.net。太酷了！
通过 jQuery 获得 onclick 的代码也非常有用。感谢您为我测试它。一切都不同了，在我的网站上实施起来非常容易。

【解决方案2】：

您在正确的轨道上，但您似乎将“event-all”传递给showEvents，而不仅仅是“all”。

因此，如果您将 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();
   }

});

【讨论】：

你是对的，使用 jQuery 找到点击的按钮。它干净了很多。 ^_^ 谢谢！

【解决方案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
}

【讨论】：

这是我第一次在这个论坛上提问，如此迅速的有用回复给我留下了深刻的印象！谢谢大家！

【解决方案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/

【讨论】：

感谢您告诉我有关 Visual jQuery 的信息。 ^_^

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

如果我正确理解了您的问题，我认为这应该是解决方案。福建

【讨论】：