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/