Custom jQuery Functions and Arguments

Question

I have written this scirpt:

 $(document).ready(function () {
   $('#tb1 li').hover(function () {
    var head = $(this).attr("title");
    var image = $(this).find("a").attr("rel");
    $('.aCnt img').attr("src", image);
    $('.aCnt span').html(head);

   });
    $('#tb1 li').eq(0).hover();
});

I want to make this script global

function interActive(myID, myClass){
    ID = '#' + myID;
    cls = '.' + myClass;
     $('ID li').hover(function () {
    var head = $(this).attr("title");
    var image = $(this).find("a").attr("rel");
    $('cls img').attr("src", image);
    $('cls span').html(head);

   });
    $('ID li').eq(0).hover();
}

I know that jQuery function not similar to for example php functions. The interActive functions will not work in jQuery. How can I modify this function for jQuery? Thanks in advance.

David Tang · Accepted Answer · 2011-01-12 00:08:43Z

4

The variables ID and cls are being treated literally as strings when put them inside quotes. You need to concatenate them like this: cls + ' img'.

function interActive(myID, myClass){
    var ID = '#' + myID;
    var cls = '.' + myClass;
    $(ID + ' li').hover(function () {
        var head = $(this).attr("title");
        var image = $(this).find("a").attr("rel");
        $(cls + ' img').attr("src", image);
        $(cls + ' span').html(head);

    });
    $(ID + 'li').eq(0).hover();
}

You may also consider writing a jQuery plugin for this, such as:

$.fn.interActive = function (target) {
    this.find('li').hover(function () {
        var head = $(this).attr('title');
        var image = $(this).find('a').attr('rel');
        $(target).find('img').attr('src', image);
        $(target).find('span').html(head);
    }).eq(0).hover();
};

Which can be used like this:

$("#someID").interActive(".someClass");

answered Jan 12, 2011 at 0:08

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

3 Comments

TheNone Over a year ago

Thanks for help. Please see here: jsfiddle.net/EkKSS/1 .There is not any change in hover.

David Tang Over a year ago

You used the first method, which doesn't create a jQuery plugin, so you call it simply using interActive(..., ...). You also need to put any strings (not variables containing strings) inside quotes. See updated fiddle: jsfiddle.net/gNFA3

TheNone Over a year ago

Thanks for great plugin method.

Collectives™ on Stack Overflow

Custom jQuery Functions and Arguments

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related