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 Jul 13 '12 at 22:11 — Bojangles, Jul 13 '12 at 22:11

undefined · Answer 1 · 2012-07-13T22:24:50.367

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

Grzegorz Kaczan · Answer 2 · 2012-07-16T17:41:52.153

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 '12 at 17:41

answered Jul 13 '12 at 22:16

Grzegorz Kaczan

17,728
3
16
17

1

Hi Grzegorz, just [check this link](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) if you want a valid page, then css identifiers cannot start with a number. – Stano Jul 13 '12 at 23:29
Yes, im aware of that, it was just a simplest example. Any good developer wouldn't create lots of number IDs :] – Grzegorz Kaczan Jul 16 '12 at 17:39

Julian · Answer 3 · 2012-07-13T22:28:22.487

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 '12 at 22:28

answered Jul 13 '12 at 22:11

Julian

2,729
19
30

Each ".item-" is different and the content inside each "#city-info-" is different... – ansarob Jul 13 '12 at 22:12
Right, the html has the different content while the class name & it's behavior are shared. Added a working example. – Julian Jul 13 '12 at 22:21

Ibu · Answer 4 · 2012-07-13T22:18:16.553

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 '12 at 22:18

answered Jul 13 '12 at 22:12

Ibu

39,552
10
71
99

Repetitive JavaScript (jQuery) code

4 Answers4