CODEWITHSUNDEEP
javascriptjquery
Undefined
Undefined

Reputation: 11431

jQuery - Running a function to replace commonly used code

I have the following code below. Id like to replace the highlighted section with a single line of code that will run all that code. The reason behind this is because i reuse this code a lot, and would save me a lot of time by being able to copy and paste a single line of code.

Any ideas on the best way to write this?

This is the part i would like replacing with a single line of code.

$(".menu-item-1").show();
$(".menu-item-2").show();
$(".menu-item-3").show();
$(".menu-item-4").show();
$(".menu-item-5").show();
$(".menu-item-6").show();

And the entirety of the code below.

if (index == 2) {
$("#prev").show();
$("#next").show();
$(".menu-item-1").show();
$(".menu-item-2").show();
$(".menu-item-3").show();
$(".menu-item-4").show();
$(".menu-item-5").show();
$(".menu-item-6").show();
$("#p3-1").delay(1000).fadeIn("slow", function ()   {
    $("#p3-2").delay(500).fadeIn("slow", function ()    {
        $("#p3-3").delay(500).fadeIn("slow", function ()    {
            $("#p3-4").delay(500).fadeIn("slow", function ()    {
                $("#p3-5").delay(500).fadeIn("slow", function ()    {
                    $("#p3-6").delay(500).fadeIn("slow", function ()    {
                        $("#p3-7").delay(500).fadeIn("slow")
                        $("#next").show();
                    });
                });
            });
        });
    });
});
}

Upvotes: 0

Views: 85

Answers (4)

bardiir
bardiir

Reputation: 14782

For the first part of your question, you can use multiple selectors in a comma separated list, like in css with jquery:

$(".menu-item-1, .menu-item-2, .menu-item-3, .menu-item-4, .menu-item-5, .menu-item-6").show();

For the whole code part you could try to use a recusive function that calls itself with an increased parameter for the selector on complete like this (carful this might contain syntax errors):

function showPart(item)
{
    var delay = 500;
    if(item == 1)
    {
        delay = 1000;
    }
    else if(item >= 6)
    {
        $("#p3-7").delay(500).fadeIn("slow")
        $("#next").show();
        return;
    }

    $("#p3-"+item).delay(1000).fadeIn("slow", function ()   {
        showPart(++item);
    });
}
showPart(1);

So your whole code:

if (index == 2) {
    $("#prev, #next, .menu-item-1, .menu-item-2, .menu-item-3, .menu-item-4, .menu-item-5, .menu-item-6").show();
    var showPart = function(item)
    {
        var delay = 500;
        if(item == 1)
        {
            delay = 1000;
        }
        else if(item >= 6)
        {
            $("#p3-7").delay(500).fadeIn("slow")
            $("#next").show();
            return;
        }

        $("#p3-"+item).delay(1000).fadeIn("slow", function ()   {
            showPart(++item);
        });
    }
    showPart(1);
}

Upvotes: 1

Snake Eyes
Snake Eyes

Reputation: 16764

$(".menu-item-1").show();
$(".menu-item-2").show();
$(".menu-item-3").show();
$(".menu-item-4").show();
$(".menu-item-5").show();
$(".menu-item-6").show();

should be 

$(".menu-item-1, .menu-item-2, .menu-item-3, .menu-item-4, .menu-item-5, .menu-item-6").show();

jQuery allows you to apply same effect to multiple selectors.

Upvotes: 1

Breno Mansur Rabelo
Breno Mansur Rabelo

Reputation: 153

Try:

$(".menu-item-1, .menu-item-2, .menu-item-3, .menu-item-4, .menu-item-5").show();

Upvotes: 1

Vilx-
Vilx-

Reputation: 106940

Will this do?

$(".menu-item-1, .menu-item-2, .menu-item-3, .menu-item-4, .menu-item-5").show();

Upvotes: 1

Related Questions