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);
});
$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-01class?$('.banner-01')will always be a truly object.