Show/Hide Issue with Image Rotator

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#nex开发者_如何学Pythont').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!

@JapanPro, sure. Here is the html. Does this help?:

<ul id="thumbs-brands">
  <li id="brand-qua"><a href="#"><img src="../assets/brand-quality-care.png"></a></li>
  <li id="brand-pro"><a href="#"><img src="../assets/brand-propet.png"></a></li>
  <li id="brand-cou"><a href="#"><img src="../assets/brand-country-squire.png"></a></li>
  <li id="brand-big"><a href="#"><img src="../assets/brand-big-red.png"></a></li>
  <li id="brand-lil"><a href="#"><img src="../assets/brand-lil-red.png"></a></li>
  <li id="brand-joy"><a href="#"><img src="../assets/brand-joy.png"></a></li>
  <li id="brand-joypro"><a href="#"><img src="../assets/brand-joy-professional.png"></a></li>
  <li id="brand-sma"><a href="#"><img src="../assets/brand-small-animal.png"></a></li>
</ul> <!-- end of thumbs-brands -->

<div id="thumb-navigation">
  <a href="#" id="next">Next</a>
  <a href="#" id="previous">Previous</a>
</div>        

<div id="brand-details">
    <div id="detail-country-squire" class="detail-section">
          //Content Here
    </div> <!-- end of .detail-body -->
</div> <!-- end of detail-pro-pet -->