0

jQuery を使用して単純なリスト フィルターを作成しています。div にいくつかのカテゴリがあり、 div#filterにいくつかのアイテムがあり#itemlistます。項目 (ハイパーリンク) をクリックすると、ページのコンテンツが .load を介して下の div に読み込まれ#contentます。カテゴリが選択されると、このカテゴリにないアイテムは「非アクティブ」クラスになり、グレー表示されます。

これで、グレー表示されたアイテムはクリック不可になります。

さまざまなアプローチを試しましたが、どれもうまくいかないようです。

  • removeAttr('href').load 関数がまだコンテンツを取得しようとしているため、機能しません
  • と同じことpreventDefault
  • 試してみ.bind('click', false);ましたが、ページの読み込み時にアイテムはすべてクリック可能ですが、後でページをリロードせずに無効になるため、どこに配置すればよいかわかりません。

アイテムをフィルタリングするコードは次のとおりです。

$('#filter li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');
// reset the active class on all the buttons
$('#filter li').removeClass('current');
// update the active state on clicked button
$(this).parent().addClass('current');
if(ourClass == 'all') {
  // show all items
  $('#itemlist').children('li').removeClass('notactive');
}
else {
  // hide all elements that don't share ourClass
  $('#itemlist').children('li:not(.' + ourClass + ')').addClass('notactive');
  // show all elements that do share ourClass
  $('#itemlist').children('li.' + ourClass).removeClass('notactive');
}
return false;
});

また、無効/有効にする必要がある ajax-call も次のとおりです。

$.ajaxSetup({cache:false});
$("#itemlist a").click(function(){
  var $itemlink = $(this).attr("href");
  $("#content").html('<p><img src="ajax-loader.gif" /></p>');
  $("#content").load(""+$itemlink+" #content > *");
return false;
});

助けてくれてありがとう！

4

2 に答える 2

2

コードをざっと見た後、次のことを行うだけで十分だと思います。

$('#itemlist a').click(function() {
    if ($(this).hasClass("notactive")) {
        return false;
    }

    // The rest of your code
    ...
});
于 2011-05-19T10:14:06.890 に答える
0

あなたの言いたいことがわかるといいのですが、非アクティブなクラスをチェックすることはあなたの仕事をしませんか?

$("#itemlist a").click(function(e){
 e. preventDefault();
 if(!$(this).hasClass('notactive')) {
   var $itemlink = $(this).attr("href");
   $("#content").html('<p><img src="ajax-loader.gif" /></p>');
   $("#content").load(""+$itemlink+" #content > *");
 }
 return false;
});
于 2011-05-19T10:14:28.350 に答える