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

jquery: hide/show based on variable for class name

提问by dac

I am pretty new to jQuery and need some help with filtering classes. The user can choose from nine buttons to select which event types to show/hide. Click a color and only events with that color show and the rest are hidden. Click "all" and all events show with none hidden. All events start out with display:block.

我对 jQuery 很陌生，需要一些过滤类的帮助。用户可以从九个按钮中选择要显示/隐藏的事件类型。单击一种颜色，仅显示具有该颜色的事件，其余的则隐藏。单击“全部”，所有事件都显示，没有隐藏。所有事件都以display:block.

Example control buttons:

示例控制按钮：

<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>

The events are pulled from a database by php and look like this example:

这些事件是由 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>

I've been working on the jQuery for two days! Not sure whether to use .filteror .hasClassor .is. None of it works. The simplest I tried was:

我已经在 jQuery 上工作了两天！不确定是否使用.filteror.hasClass或.is。它都不起作用。我尝试过的最简单的是：

function showEvents(color) {
    ($('p').hasClass(color)) ? this.style.display="block" : this.style.display="none";
}

Another attempt that did nothing was

另一种什么也没做的尝试是

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

Any help will be appreciated!

任何帮助将不胜感激！

回答by rcravens

Here is an example of how to do this.

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

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

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

I am not using images, but you will get the idea. Notice that I am not assigning javascript by using the 'onclick' event. Much cleaner if you do it via jQuery.

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

Hope this gets you started.

希望这能让你开始。

Bob

鲍勃

回答by Omkar

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
}

回答by David Tang

You're on the right track, but you seem to be passing "event-all" into showEventsinstead of just "all".

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

So if you change your onclickcode to showEvents('all'), showEvents('blue'), etc... it should work.

因此，如果您将onclick代码更改为showEvents('all'), showEvents('blue')等...它应该可以工作。

However, I'd approach this differently. It's far easier to assign your onclick handlers using jQuery in the first place, and find out the color that was clicked within this handler by looking at the class on the <li>, rather than passing it in.

但是，我会以不同的方式处理这个问题。首先使用 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();
   }

});

回答by jeremysawesome

This is the solution I have for you. I changed your onclick calls to reflect the actual name of your classes.

这是我为您提供的解决方案。我更改了您的 onclick 调用以反映您的类的实际名称。

Javascript

Javascript

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

HTML

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>

That said - I found Visual jQuery invaluable while I was learning jQuery: http://api.jquery.com/visual/

也就是说 - 我在学习 jQuery 时发现 Visual jQuery 非常宝贵：http: //api.jquery.com/visual/

回答by Muha

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

I think this should be the solution if i understood your question correctly. FJ

如果我正确理解您的问题，我认为这应该是解决方案。缩略词

回答by Andy

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