使用Image Rotator显示/隐藏问题

Question

我在一个有图像旋转器的网站上工作(使用jQuery旋转木马)。我在jQuery中设置它，当你点击一张图片时，它会使用以下代码显示与该图片相关的某些内容：

  $('#brand-cou').click(function() {
    $('#brand-details .detail-section').fadeOut(0);
    $('#detail-country-squire').fadeIn("slow");
    return false;
  });

其中# want cou是包含图像的li，#detail-country-squire是我想要显示的部分。这很好用，我还有一个下一个箭头和一个上一个箭头，这是人们在图像旋转器周围移动的另一种方式。当他们使用这些控件绕着旋转器前进时，我很难得到正确的文本来显示。这是我现在拥有的代码：

  $('a#next').click(function() {
    if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') {
      //Do what I need to do
    }
  });

当图像是前面的图像时，它会自动接收类“.Cirabout-in-focus”。我的想法是，我可以为每个特定的图像使用一个if语句，来说明它是否具有A的id和.round-in-focus的类，然后显示A的特定文本。由于某些原因，这不起作用。这似乎也相当冗长，因为对于每个图像，我都需要上面的所有代码，以及类似于下一节的上一个按钮部分。因此，在短期内，我希望能得到一些帮助，弄清楚为什么上面的if语句不起作用。如果有人真的觉得自己很慷慨，我希望对人们的想法有任何帮助，以便将这段代码压缩下来。我觉得如果我可以说，如果一个li同时有这个特定的ID和环行交叉口的类别，那么显示这个文本(无论你是点击图像还是点击下一步/上一步按钮，它都应该起作用)。我唯一的问题是如何在不将它链接到click函数或其他东西的情况下编写它，这使得它太具体了，无法涵盖所有三个选项。

谢谢你的帮助！

Answer 1

@JapanPro，当然可以。这是html。这有帮助吗？：

<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 -->