CODEWITHSUNDEEP
jquery
teslasimus
teslasimus

Reputation: 1298

shorten functions into one

I have a block with three buttons, every button loads a different content. How can I shorten those three almost identical functions into one function?

$('#mega_online').click(function() {

        $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
        $("#contentjq").load("http://site.com/online.php?more=" + $morenum + "&movies=1");
        $("#contentjq_more").empty().html('');
    $morenum = $morenum+20;
        $("#contentjq").show();

});

$('#mega_files').click(function() {
    $morenum = 0;
        $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
        $("#contentjq").load("http://site.com/files.php?more=" + $morenum + "&movies=1");
        $("#contentjq_more").empty().html('');
    $morenum = $morenum+20;
        $("#contentjq").show();
});

$('#mega_music').click(function() {
    $morenum = 0;
        $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
        $("#contentjq").load("http://site.com/music.php?more=" + $morenum + "&movies=1");
        $("#contentjq_more").empty().html('');
    $morenum = $morenum+20;
        $("#contentjq").show();
});

Upvotes: 0

Views: 73

Answers (3)

bobthyasian
bobthyasian

Reputation: 943

You can make it into a function:

function doWork($type) {
        $morenum = 0;
        $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
        $("#contentjq").load("http://site.com/" + $type + ".php?more=" + $morenum + "&movies=1");
        $("#contentjq_more").empty().html('');
        $morenum = $morenum+20;
        $("#contentjq").show();
         }

$('#mega_music').click(function() { 
doWork('music');
});

$('#mega_files').click(function() { 
doWork('files');
});

$('#mega_online').click(function() {
doWork('online');
});

Upvotes: 0

webnoob
webnoob

Reputation: 15934

You could:

function DoClick(page)
{
    $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
    $("#contentjq").load("http://site.com/" + page + ".php?more=" + $morenum + "&movies=1");
    $("#contentjq_more").empty().html('');
    $morenum = $morenum+20;
    $("#contentjq").show();
}

$('#mega_online, #mega_online, #mega_music').click(function() {
    DoClick($(this).attr('id').split('_')[1]);
});

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

I see them as almost identical, you can simply put that out in a function and find the page name as pageName = this.id.split('_')[1].

function myFunc() {
        var pageName = this.id.split('_')[1];
        $("#contentjq_more").empty().html('<center><img src="http://site.com/image.gif" /></center>');
        $("#contentjq").load("http://site.com/" + pageName + "?more=" + $morenum + "&movies=1");
        $("#contentjq_more").empty().html('');
    $morenum = $morenum+20;
        $("#contentjq").show();

}

and then you can,

$('#mega_online, #mega_files, #mega_music').click(function () {
    myFunc.call(this);
});

Upvotes: 2

Related Questions