Question

我正在使用jQuery构建一个简单的列表过滤器。我在div #filter中有一些类别，在div #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;
});

感谢您的帮助！

Answer 1

快速浏览一下代码后，我认为只需执行以下操作即可：

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

    // The rest of your code
    ...
});

Answer 2

我希望我明白你的意思，但是不会检查那些无效的班级做你的工作吗？

$("#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;
});

通过jQuery禁用href和.click

2 个答案: