Multiple functions in a JS file

Question

I want to have multiple functions to my JS file. Just not sure how to do that, since I'm really inexperienced with JavaScript. Here's what I have.

$(function(){
  $('.incentives').hide();

  $('.incentives-click').on("click", function(){
    $('.incentives').fadeToggle();
  });

    $('.incentivesB').hide();

  $('.incentivesB-click').on("click", function(){
    $('.incentivesB').fadeToggle();
  });

})();

I'm trying to add a bit that will make an image change when I hover over it.

$(function onHover(){
    $(".button").attr('src', 'images/donate2.png');
)}

$(function offHover(){
    $(".button").attr('src', 'images/donate1.png');
)}

BONUS

Also trying to get the image (.incentives-click) to toggle when clicked as well. I have an idea about how to go about this, but will appreciate if anyone wanted to help with this as well.

Thanks.

I have a little. Like I said I'm new to this. I was going to use that for the Bonus bit: changing the image when clicked. — Pink401k
– Pink401k, Commented Feb 3, 2013 at 7:20

SwiftMango · Accepted Answer · 2013-02-03 07:52:19Z

1

$(function(){
    $('.button').hover(function(){
        $(this).attr('src', 'images/donate2.png')
    }, function(){
        $(this). attr('src', 'images/donate1.png');
    });

    $('.button').on('click',function(){
        $(this).toggle(function(){
             #change_image1
        }, function(){
             #change_image2
        });
    });
});

answered Feb 3, 2013 at 7:52

SwiftMango

15.4k14 gold badges79 silver badges140 bronze badges

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

6 Comments

Pink401k Over a year ago

This looks good, but I can't quite get the hover aspect working. Not sure why. here's the HTML

<center><a class="button" rel="nofollow" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TD43XA78T9CTQ" target="_blank"><img src="/images/donate1.png" title="Donate" alt="Donate"></a></center>

SwiftMango Over a year ago

@user2036459 Why do you set src for anchor? You wanna set the src for thr img. In JS it should be like this: $('img', this).attr(...);

SwiftMango Over a year ago

@user2036459 and it might be a better pratice to put both anchor and img in the same level under a div

Pink401k Over a year ago

I just copied the link from PayPal, and switched in my image.

Pink401k Over a year ago

YEP. The weird <a> <img> thing was the culprit. Didn't even think of that. Thank you.

|

Echilon · Accepted Answer · 2013-02-03 07:34:31Z

1

I wrote a jQuery plugin which does something similar to what you need. You should be able to modify it to suit your needs with minimal effort.

You could also start with one of the jQuery plugin boilerplates such as:

edited Feb 3, 2013 at 7:34

answered Feb 3, 2013 at 7:28

Echilon

10.3k33 gold badges138 silver badges226 bronze badges

1 Comment

SeanCannon Over a year ago

A link to your plugin is not a good answer. Post the code. If the link ever goes away, this answer is useless.

Collectives™ on Stack Overflow

Multiple functions in a JS file

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related