CODEWITHSUNDEEP
jquery
Steven Jones
Steven Jones

Reputation: 694

jQuery function to replace bloated code

I have the following code to hide/show divs.First of all I hide them all and then I show the one relevant one.

$('.cart').children().hide();                                                           

$('.product1').click(function() {
    $('.cart').children().hide();               
    $('.pro1').show();
});

$('.product2').click(function() {
    $('.cart').children().hide();               
    $('.pro2').show();
});

$('.product3').click(function() {
    $('.cart').children().hide();  
    $('.pro3').show();
});

Is there a way that I can just create one function that takes an input of which a class is being clicked and shows the relevant div?

product1 will control pro1 product2 will control pro2

and so on - the numbers at the end will always be consistent.

Cheers, Steve

Upvotes: 1

Views: 89

Answers (5)

wroniasty
wroniasty

Reputation: 8052

If you mark all relevant elements with some attribute (say 'data-id'):

<a class="product" data-id="1">...</a>
<a class="product" data-id="2">...</a>
<a class="product" data-id="3">...</a>
...
<div class="cart">
   <div class="pro" data-id="1">...</div>
   <div class="pro" data-id="2">...</div>
   <div class="pro" data-id="3">...</div>
</div>

Then this should work:

$('.product').click (function() {
   $('.cart').children().hide();
   $('.pro[data-id="' + $(this).attr('data-id') + '"]').show();
});

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074694

Sure. If you know that the elements in question will only have one class on them (product1, etc.), then:

$('.cart').children().hide();                                                           
$('.product1, .product2, .product3').click(function() {
    var num = this.className.substring(7);
    $('.cart').children().hide();               
    $('.pro' + num).show();
}

If they may have other classes as well (the more likely case):

$('.cart').children().hide();                                                           
$('.product1, .product2, .product3').click(function() {
    var classes = this.className.split(' ');
    $.each(this.className.split(' '), function(index, cls) {
        var num;
        if (cls.substring(0, 7) === "product") {
            num = cls.substring(7);
            $('.cart').children().hide();               
            $('.pro' + num).show();
        }
    }
}

But I'd probably consider refactoring a bit. Perhaps a product class and a data-num attribute giving the product number:

<div class="product" data-num="1">Product 1</div>

...which makes it easier:

$('.cart').children().hide();                                                           
$('.product').click(function() {
    var num = $(this).attr('data-num');
    $('.cart').children().hide();               
    $('.pro' + num).show();
}

Attributes starting with the data-* prefix are valid on any element.

Upvotes: 1

Thomas Clayson
Thomas Clayson

Reputation: 29925

I wouldn't do it this way. All the productx are of class product and therefore should all have the class product and the product id/number should be referenced another way.

I would use the rel attribute:

<div class="product" rel="1">Product 1</div>
<div class="product" rel="2">Product 2</div>
<div class="product" rel="3">Product 3</div>

Now you can do:

$('.product').click(function(){
  var rel = $(this).attr('rel');
  $('.cart').children().hide();
  $('.pro'+rel).show();
  // this is for show however
  // as above I probably wouldn't
  // use the class to reference
  // these elements. Classes can
  // be applied to many elements.
  // I would use id rather than
  // class. e.g. <div id="pro1">
});

Upvotes: 1

sp00m
sp00m

Reputation: 48827

Add another class to each of your three HTML elements .product1, .product2 and .product3, for example common-class, and try:

$('.common-class').click(function() {
    $('.cart').children().hide();               
    $(this).show();
});

EDIT: Or even better, whithout thoose added class, that should work too:

$('.cart').children().each(function() {
    $(this).click(function() {
        $('.cart').children().hide();
        $(this).show();
    });
});

RE-EDIT: Misunderstood, see F. Calderan answer.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

var children = $('.cart').children(); 
children.hide().click(function() {
    /* assuming classes are in the form of product1... product<n> */
    var index = $(this).attr('class').replace(/^product/, '');

    children.hide();               
    $('.pro' + index).show();
});

Upvotes: 1

Related Questions