Create a reusable javascript function

Question

At the moment I'm using the below function to perform a simple slide...

function jeans(jean, links) {

$(links).hide();

$(jean).hover(

  function() {
        $(links).show('slow');
    },

  function() {
        $(links).hide('slow');
});}

And calling it where required with...

jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');

I'd like to be able to perform this by just attaching a class on the parent "#red-jeans".

I'm tring something like

function jeans(selector) {

$(selector 'ul').hide();

$(selector).hover(

  function() {
        $(selector 'ul').show('slow');
    },

  function() {
        $(selector 'ul').hide('slow');
});}

...but my syntax is atrocious!

If someone can point me in the right direction it would be very much appreciated!

The issue is now that the slide runs on every element I've got the class on. Can anyone recommend an amend that would only activate it on the current hover? I presume a (this) is needed somewhere...

Thanks!

Jamiec · Accepted Answer · 2012-08-10 10:03:42Z

3

This:

$(selector 'ul').hide();

should be

$('ul', selector).hide();

Along with all the other similar places. What this does is looks for ul elements within selector

answered Aug 10, 2012 at 10:03

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

3 Comments

Cordial Over a year ago

That's great, thank you! The issue is now that the slide runs on every element I've got the class on. Do you know how I would go about only activating it on the current hover?

Christoph Over a year ago

@Cordial take a look at my answer, this might be the solution.

Jamiec Over a year ago

@Cordial - I second what christoph says - his looks like the solution

Christoph · Accepted Answer · 2012-08-10 10:20:57Z

There are several ways you could achieve this in a clean way:

$(selector).find('ul')
$(selector + ' ul')
$('ul', selector)

are all equivalent.

In general I recommend you cache the selectors if you use them more often, because calling $() with a selector inside might be quite expensive. This way you have better performance and less trouble when refactoring.
To make the slides dependent on your current hover, use $(this) instead of the general selector.

function(selector){

  var $element = $('ul', selector);

  $element.hide();

  $(selector).hover(
    function() {
        $(this).find('ul').show('slow');
      },
    function() {
        $(this).find('ul').hide('slow');
  });

}

Reinstate Monica Cellio · Accepted Answer · 2012-08-10 10:27:21Z

Already answered, but this is a nice way of doing the same thing. You can create your own jQuery plugin like this...

$.fn.jeans = function() {
    $(this).find("ul").hide();
    $(this).hover(
        function() {
            $(this).find("ul").show('slow');
        },
        function() {
            $(this).find("ul").hide('slow');
        }
    );
}

You call it by selecting the elements to apply it to and using it like a regular jQuery function...

$("#red-jeans, #blue-jeans, #yellow-jeans").jeans();

Just for future reference ;)

pilavust · Accepted Answer · 2012-08-10 10:08:51Z

0

Just append string: $(selector + ' ul').hide('slow');

answered Aug 10, 2012 at 10:08

pilavust

5381 gold badge7 silver badges20 bronze badges

Comments

Reinstate Monica Cellio · Accepted Answer · 2012-08-10 10:13:45Z

0

you can try updating your JavaScript function as below:

function jeans(selector) {

  // you will have to use 'find' and it wil only be for the first 'ul' as well
  $(selector).find('ul:first').hide();

  $(selector).hover(

    function() {
      $(selector).find('ul:first').show('slow');
    },

    function() {
      $(selector).find('ul:first').hide('slow');
  });
}

And then call it like this...

jeans('#red-jeans');
jeans('#blue-jeans');
jeans('#yellow-jeans');

I Hope this would help

edited Aug 10, 2012 at 10:13

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

answered Aug 10, 2012 at 10:09

Ankur Ghelani

6594 silver badges16 bronze badges

Collectives™ on Stack Overflow

Create a reusable javascript function

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Related