jquery：クラス名の変数に基づいた非表示/表示

Question

私はjQueryにはかなり新しく、フィルタリングクラスに関する助けが必要です。ユーザーは9つのボタンから選択して、どのイベントタイプを表示/非表示にするかを選択できます。色をクリックして、その色のショーのイベントのみを表示し、残りは非表示にします。 「すべて」をクリックすると、すべてのイベントが非表示になります。すべてのイベントは、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> 

は、私は2日間の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のを学んでいた間、私は、Visual jQueryの貴重な発見：http://api.jquery.com/visual/