how to repeat same Javascript code over multiple html elements

Question

Note: Changed code so that images and texts are links.

Basically, I have 3 pictures all with the same class, different ID. I have a javascript code which I want to apply to all three pictures, except, the code needs to be SLIGHTLY different depending on the picture. Here is the html:

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/actual.jpg"  id="first"></a>
<a href="images/watermark_pic1.jpg"><div id="firsttext" class="spanlink"><p>lots of text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/fake.jpg" id="second"></a>
<a href="images/watermark_pic1.jpg"><div id="moretext" class="spanlink"><p>more text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/real.jpg" id="eighth"></a>
<a href="images/watermark_pic1.jpg"><div id="evenmoretext" class="spanlink"><p>even more text</p></div></a>
</div>

Here is the Javascript for the id="firsttext":

$('#firstextt').hide();
$('#first, #firsttext').hover(function(){
 //in
  $('#firsttext').show();

},function(){
 //out
  $('#firsttext').hide();
});

So when a user hovers over #first, #firsttext will appear. Then, I want it so that when a user hovers over #second, #moretext should appear, etc.

I've done programming in Python, I created a sudo code and basically it is this.

text = [#firsttext, #moretext, #evenmoretext]
picture = [#first, #second, #eighth] 

for number in range.len(text) //over here, basically find out how many elements are in text


$('text[number]').hide();
$('text[number], picture[number]').hover(function(){
 //in
  $('text[number]').show();

},function(){
 //out
  $('text[number]').hide();
});

The syntax is probably way off, but that's just the sudo code. Can anyone help me make the actual Javascript code for it?

Jason Young · Accepted Answer · 2013-07-18 00:03:12Z

2

try this

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink").show();
});

answered Jul 18, 2013 at 0:03

Jason Young

5753 silver badges16 bronze badges

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

5 Comments

user216485 Over a year ago

Hm doesn't work for some reason, .spanlink isn't even 'hiding' :/

user216485 Over a year ago

okay I changed up my code so that the images and text are links, does that make a difference?

Jason Young Over a year ago

it not the thing about link. javascript is different from python

user216485 Over a year ago

Right but the code provided doesn't work for me, it doesn't hide #text, #moretext and #evenmoretext :/

Jason Young Over a year ago

it just didn't hide in the begining,you just add $(".spanlink").hide() before the first line. i had test it and it runs ok

Andrey Shchekin · Accepted Answer · 2013-07-18 00:02:35Z

0

Why not

$('.spanlink').hide();
$('.column1of4').hover(
  function() {
    // in
    $(this).children('.spanlink').show();    
  },
  function() {
    // out
    $(this).children('.spanlink').hide();
  }
);

It doesn't even need the ids.

answered Jul 18, 2013 at 0:02

Andrey Shchekin

21.8k20 gold badges100 silver badges167 bronze badges

Comments

pirs · Accepted Answer · 2013-07-18 00:04:35Z

0

You can do it :

$('.column1of4').click(function(){

    $(this); // the current object
    $(this).children('img'); // img in the current object

});

or a loop :

$('.column1of4').each(function(){
    ...
});

Dont use Id as $('#id') for multiple events, use a .class or an [attribute] do this.

answered Jul 18, 2013 at 0:04

pirs

2,4612 gold badges20 silver badges25 bronze badges

Comments

Diego Paladino · Accepted Answer · 2013-07-18 00:05:28Z

0

If you're using jQuery, this is quite easy to accomplish:

$('.column1of4 .spanlink').hide();
$('.column1of4 img').mouseenter(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').show();
});
$('.column1of4 img').mouseleave(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').hide();
});

answered Jul 18, 2013 at 0:05

Diego Paladino

967 bronze badges

Comments

defau1t · Accepted Answer · 2013-07-18 00:06:37Z

0

Depending on your markup structure, you could use DOM traversing functions like .filter(), .find(), .next() to get to your selected node.

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink, img").show();
});

answered Jul 18, 2013 at 0:06

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Comments

kalley · Accepted Answer · 2013-07-18 03:14:10Z

0

So, the way you would do this, given your html would look like:

$('.column1of4').on('mouseenter mouseleave', 'img, .spanlink', function(ev) {
    $(ev.delegateTarget).find('.spanlink').toggle(ev.type === 'mouseenter');
}).find('.spanlink').hide();

But building on what you have:

var text = ['#firsttext', '#moretext', '#evenmoretext'];
var picture = ['#first', '#second', '#third'];

This is a traditional loop using a closure (it's better to define the function outside of the loop, but I'm going to leave it there for this):

// You could also do var length = text.length and replace the "3"
for ( var i = 0; i < 3; ++i ) {
    // create a closure so that i isn't incremented when the event happens.
    (function(i) {
        $(text[i]).hide();
        $([text[i], picture[i]].join(',')).hover(function() {
            $(text[i]).show();
        }, function() {
            $(text[i]).hide();
        });
    })(i);
}

And the following is using $.each to iterate over the group.

$.each(text, function(i) {
    $(text[i]).hide();
    $([text[i], picture[i]].join(', ')).hover(function() {
        $(text[i]).show();
    }, function() {
        $(text[i]).hide();
    });
});

Here's a fiddle with all three versions. Just uncomment the one you want to test and give it a go.

edited Jul 18, 2013 at 3:14

answered Jul 18, 2013 at 0:03

kalley

18.5k2 gold badges41 silver badges37 bronze badges

7 Comments

user216485 Over a year ago

The 'building on what I have' seems to hide it but not show it :/

kalley Over a year ago

That's because I'm an idiot and was doing something incredibly stupid. I've updated with a jQuery way since you're already using it.

user216485 Over a year ago

#firsttext, #moretext and #evenmoretext.. Also, I changed up the code so that everything are links, does that make a difference?

user216485 Over a year ago

Okay so for your code, should I ignore (function(i) { and just do, for ( var i = 0; i < 3; ++i ) { $.each(text, function(i) {? Or should I keep the stuff after (function(i) { in there as well?

kalley Over a year ago

For the for loop, definitely need the closure, but you don't need S.each. So you can use one or the other, but not really mix and match. $.each is creating a loop and calling the function (which is the same thing that the closure is creating in the for loop. I'll separate those to make them more clear.

|

smilebomb · Accepted Answer · 2013-07-18 12:46:35Z

0

I moved the image inside the div and used this code, a working example:

$('.column1of4').each(function(){
    $('div', $(this)).each(function(){
        $(this).hover(
            function(){
                //in
                $('img', $(this)).show();
            },
            function(){
                //out
                $('img', $(this)).hide();
            });
    });
});

The general idea is 1) use a selector that isn't an ID so I can iterate over several elements without worrying if future elements will be added later 2) locate the div to hide/show based on location relational to $(this) (will only work if you repeat this structure in your markup) 3) move the image tag inside the div (if you don't, then the hover gets a little spazzy because the positioned is changed when the image is shown, therefore affecting whether the cursor is inside the div or not.

EDIT

Updated fiddle for additional requirements (see comments).

edited Jul 18, 2013 at 12:46

answered Jul 18, 2013 at 0:22

smilebomb

5,5239 gold badges54 silver badges86 bronze badges

4 Comments

user216485 Over a year ago

This doesn't seem to hide the text container :/

smilebomb Over a year ago

@user216485 What do you consider the text container? I don't see an element with class or ID of text container.

user216485 Over a year ago

#firsttext, #moretext and #evenmoretext is what I meant by the text container

smilebomb Over a year ago

@user216485 That requirement wasn't in your question, but I have updated my answer to accommodate this. Please see my edit.

Collectives™ on Stack Overflow

how to repeat same Javascript code over multiple html elements

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

7 Comments

EDIT

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

Comments

Comments

7 Comments

EDIT

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related