1

I have a simple function that I want to run 3 times. Instead of using the same function I'd like to create some sort of IF statement that says if banner = banner class, then variable = relevant variable.

I'm just not sure how to word my if's.

Any help would be great!

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

    if ($('.banner-01')) {
        var $someText = $banner1;
    }

    if ($('.banner-02')) {
        var $someText = $banner2;
    }

    if ($('.banner-03')) {
        var $someText = $banner3;
    }

$('.banner-01 .info').each(function(){
    $(this).html($someText);

});

$('.banner-02 .info').each(function(){
    $(this).html($someText);
});

$('.banner-03 .info').each(function(){
    $(this).html($someText);
});
3
  • The code you've posted doesn't make much sense - can you elaborate on what exactly you're trying to do? What is the intended relationship between $banner1 (which is just a string variable) and $('.banner-01'), which is a jQuery method that will fetch an array of all elements with the .banner-01 class? Commented Feb 7, 2015 at 22:16
  • @AntP - Sorry - So IF the banner has the class of .banner-01 then var $someText = $banner1; and so on for 2 & 3. It's essentially so the banners use the same function but the variable changes depending on what banner it is. I'm just not sure how to write the if statement correctly. Commented Feb 7, 2015 at 22:19
  • $('.banner-01') will always be a truly object. Commented Feb 7, 2015 at 22:23

3 Answers 3

2

You don't need if statements at all.

What you want is to iterate over each element with each class and set the text to the appropriate variable.

$('.banner-01') gets you an array of all elements with the "banner-01" class. You can then use each to perform an action for each of these, like so:

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

$('.banner-01').each(function () {
    $(this).html($banner1);
});

$('.banner-02').each(function () {
    $(this).html($banner2);
});

$('.banner-03').each(function () {
    $(this).html($banner3);
});

Then, you fire your one method once, not once per element.

At the minute, $someText will always end up as 'Even More Text' (because $('.banner-03') will always return a value and therefore the condition will evaluate to true). Once $someText has been set 3 times and reached its final value, you then go through all of the elements of every class and set them all to 'Even More Text'.

Following your code through to illustrate the problem:

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

if ($('.banner-01')) {
    // 1. Sets $someText to 'Some Text'
    var $someText = $banner1;
}

if ($('.banner-02')) {
    // 2. Sets $someText to 'Some More Text'
    var $someText = $banner2;
}

if ($('.banner-03')) {
    // 3. Sets $someText to 'Even More Text'
    var $someText = $banner3;
}

// From this point on, $someText is 'Even More Text'.

$('.banner-01 .info').each(function(){
    // 4. Sets elements with banner-01 class to 'Even More Text'
    $(this).html($someText);

});

$('.banner-02 .info').each(function(){
    // 5. Sets elements with banner-02 class to 'Even More Text'
    $(this).html($someText);
});

$('.banner-03 .info').each(function(){
    // 6. Sets elements with banner-03 class to 'Even More Text'
    $(this).html($someText);
});
Sign up to request clarification or add additional context in comments.

Comments

0

Assuming I'm understanding what you're trying to do, I think this will work:

var $banner1 = 'Some Text',
$banner2 = 'Some More Text',
$banner3 = 'Even More Text',

if ($('.banner-01')) {
    $('.banner-01 .info').each(function(){
        $(this).html($banner1);
    });
}

if ($('.banner-02')) {
    $('.banner-02 .info').each(function(){
        $(this).html($banner2);
    });
}

if ($('.banner-03')) {
    $('.banner-03 .info').each(function(){
        $(this).html($banner3);
    });
}

And actually you don't even need the if statements because if the elements are not found you'll have an empty array and the each function will just be skipped.

Comments

0

You could try something like the code below. This would add the advantage that it would work regardless of the number of banners you have.

var banners = ["Some Text", "Some More Text", "Even More Text"]; // Store banner text in an array.
for(var counter = 0; counter < banners.length; counter++) {
    var sel = ".banner-"; // Set selector prefix
    if(counter < 10) sel += "0"; // Add 0 if less than 10
    sel += counter + " .info"; // Add suffix
    $(sel).html(banners[counter]); // Set banner html
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.