Question

我正在使用图像旋转器（使用jQuery Roundabout）工作。我在jQuery中进行了设置，当您单击图像时，它会使用以下代码显示与该图像关联的某些内容：

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

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

当图像是正面图像时，它会自动接收“.roundabout-in-focus”类。我的想法是我可以为每个特定的图像使用if语句来说明它是否具有A的id以及.roundabout-in-focus类，然后显示A的特定文本。由于某种原因，这是行不通的。这看起来也相当长，因为对于每个图像，我需要上面的所有代码，以及类似于下一部分的前一个按钮部分。所以，在短期内，我会很乐意帮助弄清楚为什么上面的if语句不起作用。如果有人感觉非常慷慨，我会很乐意帮助人们关于如何压缩这些代码的想法。我觉得如果我可以说，如果一个li同时拥有这个特定ID和圆形焦点类，那么就显示这个文本（无论你点击图像还是下一个/上一个按钮，它都应该有效）。我唯一的问题是如何在不将其链接到点击功能的情况下编写此内容，或者使其过于具体而无法包含所有三个选项。

感谢您的帮助！

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

使用Image Rotator显示/隐藏问题

1 个答案: