Repetitive JavaScript (jQuery) code

Question

Here's something simple I am doing. I have some div's, each called ".item-1", ".item-2", etc. When the user hovers on ".item-1", the "#city-info-1" div slides up, while it slides down when the user hovers off. I knew enough to do that, and know enough that the way I've coded it isn't the best way possible. Just curious how others would do this, so I don't have to repeat practically the same code every time. Appreciate any suggestions :)

    $('#city-info-1, #city-info-2, #city-info-3, #city-info-4, #city-info-5, #city-info-6, #city-info-7').hide();

    $('.item-1').hover(function() {
        $('#city-info-1').stop().slideToggle(400);
    }, function() {
        $('#city-info-1').hide();
    });

    $('.item-2').hover(function() {
        $('#city-info-2').stop().slideToggle(400);
    }, function() {
        $('#city-info-2').hide();
    });

    $('.item-3').hover(function() {
        $('#city-info-3').stop().slideToggle(400);
    }, function() {
        $('#city-info-3').hide();
    });

    $('.item-4').hover(function() {
        $('#city-info-4').stop().slideToggle(400);
    }, function() {
        $('#city-info-4').hide();
    });

    $('.item-5').hover(function() {
        $('#city-info-5').stop().slideToggle(400);
    }, function() {
        $('#city-info-5').hide();
    });

    $('.item-6').hover(function() {
        $('#city-info-6').stop().slideToggle(400);
    }, function() {
        $('#city-info-6').hide();
    });

    $('.item-7').hover(function() {
        $('#city-info-7').stop().slideToggle(400);
    }, function() {
        $('#city-info-7').hide();
    });

Please post the HTML you've written.

Bojangles
– Bojangles

2012-07-13 22:11:40 +00:00
Commented Jul 13, 2012 at 22:11 — Bojangles
– Bojangles, Commented Jul 13, 2012 at 22:11

Ram · Accepted Answer · 2012-07-13 22:24:50Z

2

based on you current markup you can use start with selector:

Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.

$('div[id^=city-info]').hide();

$('div[class^=item]').hover(function() {
      var cls = $(this).attr('class').replace('item', "")
      $('#city-info' + cls).stop().slideToggle(400);
  }, function() {
      $('#city-info' + cls).hide();
});

edited Jul 13, 2012 at 22:24

answered Jul 13, 2012 at 22:11

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Grzegorz Kaczan · Accepted Answer · 2012-07-16 17:41:52Z

1

Set an unique ID(only some prefix and the integer number, i.e. 'i-666') for each if the item and set same class for all.

$('.item').hover(function() {
  var item_id = item.attr('id');
  $('#city-info-' + item_id).stop().slideToggle(400);
}, function() {
  $('#city-info-' + item_id).hide();
});

edited Jul 16, 2012 at 17:41

answered Jul 13, 2012 at 22:16

Grzegorz Kaczan

21.8k3 gold badges21 silver badges17 bronze badges

2 Comments

Stano Over a year ago

Hi Grzegorz, just check this link if you want a valid page, then css identifiers cannot start with a number.

Grzegorz Kaczan Over a year ago

Yes, im aware of that, it was just a simplest example. Any good developer wouldn't create lots of number IDs :]

Ibu · Accepted Answer · 2012-07-13 22:18:16Z

0

a div can have multiple class so you can have each of thoses divs have a common class name

<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
...

so you can select :

$('.item').hover(function() {
        ...
    }, function() {
       ....
    });

please show us your html, because this looks like something you can simply do with css

edited Jul 13, 2012 at 22:18

answered Jul 13, 2012 at 22:12

Ibu

44k14 gold badges82 silver badges109 bronze badges

Comments

Julian · Accepted Answer · 2012-07-13 22:28:22Z

0

Use a generic css class and attach behavior to it rather than specific elements.

Example:

http://jsfiddle.net/K3mbE/1/

Javascript:

$('.slider').hover(function() {
  $(this).find('div').stop().slideToggle(400);
}, function() {
  $(this).find('div').hide();
});

HTML:

<div class="slider">Seattle
    <div>It rains a lot</div>
</div>
<div class="slider">New York
    <div>Greatest city on earth</div>
</div>
<div class="slider">Trantor
    <div>Greatest city in the galexy</div>
</div>

edited Jul 13, 2012 at 22:28

answered Jul 13, 2012 at 22:11

Julian

2,8651 gold badge25 silver badges31 bronze badges

2 Comments

ansarob Over a year ago

Each ".item-" is different and the content inside each "#city-info-" is different...

Julian Over a year ago

Right, the html has the different content while the class name & it's behavior are shared. Added a working example.

Collectives™ on Stack Overflow

Repetitive JavaScript (jQuery) code

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related