Search code examples
javascriptjquerypreloader

jQuery / JS - How can I exclude <a> with specific href in conditions?

I'm trying to exclude specific <a> into if statement, basing on their href values. More specifically I'm showing a preloader div when whatever <a> is clicked except for those triggering javascript or containing #. This makes my users see a nice screen while waiting for page load.

I've written this little js things:

$('a').click(function() {
  var href = $(this).attr('href');

  //my conditions
  if ((href != '#') || (href != 'javascript:void(0);')) {
    $('#preloader').fadeIn("fast");
  }
});

//Showing preloader
$(window).load(function() {
  $('#preloader').fadeOut("slow");
});

My statement works excluding links containing # but for those with javascript:void(0);, it doesn't instead. This is my problem. What am I doing wrong? Is there an error in statement or in values?

Solution

  • There are two immediate approaches I can think of to address your problem with the given code:

    1. Your conditions are incorrect. if((href != '#') || (href != 'javascript:void(0);')) should be if(href != '#' && href != 'javascript:void(0);')

    2. Optimally, exclude irrelevant elements from the query itself: 

    $('a').not('[href="#"]').not('[href="javascript:void(0);"]).click(function() {
    $('#preloader').fadeIn("fast");
});

    See jQuery's Attribute Not Equal Selector.