Looping an array together with a jquery hover function

Question

I'm trying to... God, this is hard to explain.

I got an array called 'triggers' with these variables:

"#1_trigger","#2_trigger","#3_trigger"

And inside a jQuery each(), I create another variable called 'targets' that copies everything from 'triggers' and replaces all _trigger to _target. I then append the 'triggers' to anchor IDs, and 'targets' to hidden div IDs.

What I want to do, is this: When hovering a _trigger, the _target will show up. I've managed to make it work with only one variable, but not with multiple.

As I said, it's kind of hard to explain what I want to do in text, so here's a demo and my progress so far: http://jsfiddle.net/WJWe3/6/

I've been stuck with this one for too many hours now, please help!

Gabriele Petrioli · Accepted Answer · 2011-04-12 14:31:58Z

1

1st, do not name them with a # since you use that in the actual id. (you can add the # in when you need to seek them with jquery)

After that step the code you need is

$("#experiment a").hover(function(){
   $( '#' + this.id.replace('_trigger', '_target') ).show();

}, function(){
   $( '#' + this.id.replace('_trigger', '_target') ).hide();
});

This should be outside of the each loop since it automatically finds the relevant target.

You were also missing a sign = at the point that you assigned the id to the divs.

demo at http://jsfiddle.net/gaby/WJWe3/14/

answered Apr 12, 2011 at 14:31

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

Daniel Marklund Over a year ago

Thank you so much for learning me all those things, and thank you for the working demo. The = sign was kind of embarrassing, haha.

Andy · Accepted Answer · 2011-04-12 14:31:46Z

1

Something like this maybe?
http://jsfiddle.net/WJWe3/11/

answered Apr 12, 2011 at 14:31

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Comments

Guffa · Accepted Answer · 2011-04-12 14:41:13Z

0

When you set the id for an element, it should not start with #. It's only when you use it as a selector in jQuery that it starts with #.

However, you don't even need to use the id. Create the a and div element as objects instead of as a string, then you can hook up the hover event directly to the link, and access the div directly, instead of trying to find it after adding it to the page.

jsfiddle.net/WJWe3/16/

var triggers = ["1_trigger", "2_trigger", "3_trigger"];

jQuery.each(triggers, function(i, val) {
    var target = $('<div/>', { className: 'hidden' }).text('You found me!');
    var link = $('<a/>', { href: '#' }).text(val).hover(function(){
        target.stop().fadeTo("normal", 1.00);
    }, function(){
        target.stop().fadeTo("normal", 0.00);
    });;
    $("#experiment").append(link).append(target).append("<br/>");
});

answered Apr 12, 2011 at 14:41

Guffa

703k111 gold badges760 silver badges1k bronze badges

2 Comments

Daniel Marklund Over a year ago

Woah, that's a really clever way to do it. Thank you very much for that demo, learned me a lot!

Adam Terlson Over a year ago

Watch those appends though! You'd really want to append them to a detached element or a document fragment and then append the one big item at the end!

herostwist · Accepted Answer · 2011-04-12 14:42:21Z

0

here's how i would do this http://jsfiddle.net/WJWe3/15/

<div id="experiment">
    <p><a>test 1</a> <span class='hidden'>hidden 1</span></p>
    <p><a>test 2</a> <span class='hidden'>hidden 2</span></p>
    <p><a>test 3</a> <span class='hidden'>hidden 3</span></p>
</div>

...

$('#experiment a').hover(
    function(){ 
        $(this).siblings('span').stop().fadeTo("normal",1); 
    },
    function(){ 
        $(this).siblings('span').stop().fadeTo("normal",0); 
    }
);

answered Apr 12, 2011 at 14:42

herostwist

3,9781 gold badge30 silver badges36 bronze badges

1 Comment

Daniel Marklund Over a year ago

That's cool! I didn't know it could be that simple. Not really what I was looking for to my project, but something to save for later. Thanks a lot!

Adam Terlson · Accepted Answer · 2011-04-12 15:02:31Z

0

Here's another that works.... Just for fun.

http://jsfiddle.net/WJWe3/18/

edited Apr 12, 2011 at 15:02

answered Apr 12, 2011 at 14:35

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

4 Comments

Adrian Marinica Over a year ago

It doesn't work for me. Using Firefox 4. Nothing happening when hovering.

Adam Terlson Over a year ago

Sorry about that. Forgot to save a change. Edited above.

Daniel Marklund Over a year ago

Thank you for answering and helping me out! Will this apply to all anchors on the specific page? :)

Adam Terlson Over a year ago

As I've written it, yes. I was too lazy to wrap it in a container or reference a specific class, which you'd of course want to do.

Collectives™ on Stack Overflow

Looping an array together with a jquery hover function

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related