I am working on a site with an image rotator (using jQuery Roundabout). I have set it up in jQuery that when you click on an image, it displays certain content associated with that image using the following code:
$('#brand-cou').click(function() {
$('#brand-details .detail-section').fadeOut(0);
$('#detail-country-squire').fadeIn("slow");
return false;
});
Where #brand-cou is the li containing the image and #detail-country-squire is the section I want to show. This works great, expect I also have a next and a previous arrow, which is an alternative way for people to move around the image rotator. I am having the hardest time getting the proper text to show when they progress around the rotator using these controls. This is the code I have now:
$('a#next').click(function() {
if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') {
//Do what I need to do
}
});
When the image is the front image, it automatically receives the class ".roundabout-in-focus." My thought was that I could use an if statement for each specific image to say if it has the id of A and also the class of .roundabout-in-focus, then show A's specific text. For some reason this is not working. This also seems fairly long winded because for each image I would need all of the code above, as well as a previous button section similar to the next section. So, in the short run, I would love some help figuring out why my if statement above is not working. If someone is feeling really generous, I would love any help on people's thoughts on how to condense this code down. I feel like if I could just say, if a li has both this specific ID and the class of roundabout-in-focus, then show this text (which should then work whether you click on the image or on the next/previous button). My only problem is how to write this without linking it to a click function or something else that makes it too specific to encompass all three options.
Thanks for the help!