图像旋转器的显示/隐藏问题

发布于 2024-09-17 01:29:02 字数 1014 浏览 6 评论 0原文

我正在开发一个带有图像旋转器的网站(使用 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 是第 I 部分想要展示。这很好用,希望我还有下一个和上一个箭头,这是人们在图像旋转器周围移动的另一种方式。当他们使用这些控件围绕旋转器前进时,我很难获得正确的文本来显示。这是我现在的代码:

  $('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 又具有焦点环行的类别,则显示此文本(无论您单击图像还是单击下一个/上一个按钮,它都应该起作用) 。我唯一的问题是如何编写它而不将其链接到单击函数或其他使其过于具体而无法包含所有三个选项的东西。

感谢您的帮助!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暮年慕年 2024-09-24 01:29:02

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

@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 -->
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文