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!

Answer 1

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

Answer 2

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

}

Answer 3

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

Answer 4

只需附加字符串即可： $(selector + ' ul').hide('slow');

Answer 5

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