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 调用：

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

我希望我明白你的意思，但是检查 notactive 类不会做你的工作吗？

$("#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 回答