• 0

jQuery stays bold/red even when nothing is check


Question

I'm going to ask one more question and I should be done with this page. I'm not a jQuery or javascript coder. I know very little and need to learn how to do it but instead then I need help with this question. Everything on the page is working fine beside this issue I have. The jQuery coder didn't set it up so that if you uncheck all the options then it should go back to like it was nothing bold/red. What happens is that everything becomes bold/red and I don't think the coder was trying to do this. How can I remove that so that if the user decided to uncheck all the options then it goes back to the start instead of all of it being red/bold.

 

www.romabio.com/products/index.html

// Set up tabs
$('.tabbable .nav a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

var $filter = $('.products-filter'),
	products = $('.product-List').find('a.product'),
	buttons = $filter.find('button'),
	filters = _.map(buttons, function(el) {
		return $(el).data('filter');
	}),
	filterOn = [];

	// Set up Popovers
	/*$(products).popover({
		trigger: "hover",
		container: "#products",
		html: true,
		content: function() {
			// content is hidden div.description inside the li of the link
			return $(this).closest('li').find('.description').html();
		},
		title: function() {
			// title is link text
			// lnr - didn't seem to need this
			//return $(this).text();
		}
	});*/
		
	// run this when user clicks on a filter button
	$filter.on('click', 'button', function() {
		var $this = $(this),
			groupBy;
		
		// Toggle button on click, we disabled that automatic toggle
		// because we want to do more than just change the button on click
		$this.button('toggle');

		getClassesFromActiveButtons();

		// Disabled all products
		products.addClass('disabled');		
		// add counts and product variables - lnr
		var product_count=0;
		var current_count=0;		
		var tab_count=0;
		var total_count=1;		
		var total_products= products.length;
		var product_header = '';
		var product_header_old = '';	
		
		// Cycle through products and enable ones the match the filter buttons
		_.forEach(products, function(product) {
			var $p = $(product),
				isActive = true;
				product_header=$p.data('filter');
				
			// assume product should be active, check the product and see if has 
			// ALL of the classes for the selected filters			
			_.forEach(filterOn, function(filter) {
				//console.log('checking ' + $p.text() + ' for ' + filter + 'header ' + product_header + ' current_count ' + current_count)
				
				// if it's already false, you don't have to check, that's why we check to make
				// sure it's active to begin with
				if (isActive && !$p.hasClass(filter)) {
					isActive = false;		
					$p.removeClass('enabled');
				}
			});
			current_count = product_count;
			// enable link if it's active
			if (isActive) {
				product_count++;
				$p.removeClass('disabled');
							
				$p.addClass('enabled'); // highlight - lnr
			}
		console.log('checking ' + $p.text()  + 'header ' + product_header + ' product_count:' + product_count + ' current_count:' + current_count)
				
			// check counts - lnr
			if ( (product_header != product_header_old) || (total_count == total_products ) ) {		
					// write to tabs
					if (tab_count !=0) {
						switch(tab_count){
							case 1:
								$('.top-tabs li.paints div#num_paints').text('(' + current_count + ')');
								$('.top-tabs li.paints div#num_paints').addClass(' active_num');
							case 2:
								$('.top-tabs li.primers div#num_primers').text('(' + current_count + ')');
								$('.top-tabs li.primers div#num_primers').addClass(' active_num');;
							case 3:
								$('.top-tabs li.plasters div#num_plasters').text('(' + current_count + ')');
								$('.top-tabs li.plasters div#num_plasters').addClass(' active_num');
							case 4:
								$('.top-tabs li.stains div#num_stains').text('(' + current_count + ')');
								$('.top-tabs li.stains div#num_stains').addClass(' active_num');
							case 5:								
								$('.top-tabs li.specialty div#num_specialty').text('(' + current_count + ')');
								$('.top-tabs li.specialty div#num_specialty').addClass(' active_num');
						}
						
						if (isActive) {	
							product_count=1;					
						} else {
							product_count=0;
						}					
					}
					tab_count++;

			}
			product_header_old = product_header;
			total_count++;
			
			
		});
	})
	
	$('#reset').click(function() {
		buttons.removeClass('active'); // Turn them all off
		products.removeClass('disabled'); //Turn all products on
		products.removeClass('enabled'); //Turn all products off
		$('.top-tabs li.paints div#num_paints').text('(21)');
		$('.top-tabs li.paints div#num_paints').removeClass(' active_num');
		$('.top-tabs li.primers div#num_primers').text('(8)');
		$('.top-tabs li.primers div#num_primers').removeClass(' active_num');
		$('.top-tabs li.plasters div#num_plasters').text('(9)');
		$('.top-tabs li.plasters div#num_plasters').removeClass(' active_num');
		$('.top-tabs li.stains div#num_stains').text('(8)');
		$('.top-tabs li.stains div#num_stains').removeClass(' active_num');						
		$('.top-tabs li.specialty div#num_specialty').text('(5)');
		$('.top-tabs li.specialty div#num_specialty').removeClass(' active_num');	
		return false;
	});

	function disableAllProducts() {
		products.addClass('disabled');
	}

	function getClassesFromActiveButtons() {
		filterOn = _.filter(buttons, function(button) {
			var $button = $(button);

			if ($(button).is('.active')) {
				return $(button).data('filter');	
			} 
		}).map(function(button) {
			var $button = $(button);
			return $(button).data('filter');	
		})

		console.log(filterOn);
	}

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Haven't had time to look into this code for you but please combine your jquery selectors like this in the future to save a lot of unnecessary code ;)

$("#example1,#example2,.example3,h2").something();
Link to comment
Share on other sites

  • 0

Hi ACTIONpack,

 

It seems that when you uncheck a box the CSS class "enabled" is not removed. Try to add this:

products.removeClass('enabled');

after this line:

// Disabled all products
products.addClass('disabled');	

It would help a lot if I could get access to the code to test it. It's pretty easy to fix. :)

 

Also it's good practice to assign selected DOM element to the variable. That way you search the DOM tree only once and your code runs faster. :) So it would be better to:

var numPaints = $('.top-tabs li.paints div#num_paints');
numPaints.text('(21)');
numPaints.removeClass(' active_num');

and so on... :)

Link to comment
Share on other sites

  • 0

Hi ACTIONpack,

 

It seems that when you uncheck a box the CSS class "enabled" is not removed. Try to add this:

products.removeClass('enabled');

after this line:

// Disabled all products
products.addClass('disabled');	

It would help a lot if I could get access to the code to test it. It's pretty easy to fix. :)

 

Also it's good practice to assign selected DOM element to the variable. That way you search the DOM tree only once and your code runs faster. :) So it would be better to:

var numPaints = $('.top-tabs li.paints div#num_paints');
numPaints.text('(21)');
numPaints.removeClass(' active_num');

and so on... :)

 

I try that but it didn't work.

Link to comment
Share on other sites

This topic is now closed to further replies.