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/

Я не использую изображения, но вы поймете идею. Обратите внимание, что я не назначаю JavaScript с помощью события «onclick». Гораздо чище, если вы делаете это через jQuery.

Надеюсь, это поможет вам.

Bob

Answer 2

Это решение, которое у меня есть для вас. Я изменил ваши звонки по клику, чтобы отразить фактическое название ваших классов.

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>

Тем не менее, я обнаружил, что Visual jQuery неоценим, когда я изучал jQuery: http://api.jquery.com/visual/

Answer 3

Вы на правильном пути, но вы, кажется, передаете «событие-все» в showEvents вместо просто «все».

Таким образом, если вы измените свой код onclick на showEvents('all'), showEvents('blue') и т. Д., Он должен работать.

Однако я бы подошел к этому иначе. Гораздо проще назначить свои обработчики onclick, используя jQuery, и узнать цвет, по которому щелкнул этот обработчик, посмотрев на класс в <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

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

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