CODEWITHSUNDEEP
jquery
Nick
Nick

Reputation: 2549

jQuery - if element = (class) then variable = (variable)

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

Upvotes: 1

Views: 71

Answers (3)

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

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
}

Upvotes: 0

Ant P
Ant P

Reputation: 25221

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

Upvotes: 2

Jeff F.
Jeff F.

Reputation: 1067

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.

Upvotes: 0

Related Questions