Question

我的页面上有一个菜单，用于更改特定div（）的来源。项目是div位于一个名为foliolist的div中

图像更改的div位于：

<div id="random"><img id="grouptabs" src="/u/i/1x0.jpg" /> </div>

更改div的项目列表，这些项目位于页面的绝对底部

<div class="foliolist"><a href="/u/i/2.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/4.png"><img src="/v/r.gif"/></a></div>
<div class="foliolist"><a href="/u/i/6.png"><img src="/v/r.gif"/></a></div>

实现它的Jquery代码

$('.foliolist a').click(function(e) { 
  e.preventDefault(); 
  $('.foliolist a').css('background-color', 'transparent');  
  $(this).css('background-color', '#FFFFFF'); 
  $('#grouptabs').attr('src', $(this).attr('href')); 
});

显示项目列表，默认情况下会使用下面的代码选择第一个项目

$('#bubbles > #folioholder > .foliolist > a:first').each(function(e){
  $('.foliolist').css('background-color', 'transparent'); 
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});

我想添加新的导航栏，通过添加下一个和上一个按钮图像来补充页面，从而为页面提供更好的用法。这些将位于页面的左侧和右侧。

如果单击左下一个按钮，则网格中的进度会前进，前一个按钮的进度会相同，但会向后移动。

我不知道如何在不看傻的情况下接近这一点，所以我们将不胜感激任何帮助。

谢谢

Answer 1

小评论：您的最后一段代码可以替换为$('#bubbles > #folioholder > .foliolist > a:first').click();

关于实际问题：

您必须创建按钮并绑定它们以检索当前显示的图片以检索以下/之前的图片。

$('#btnNext').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var nextPic = "";        
    $('.foliolist a img').each(function(){
        if (foundPic) {nextPic = $(this).attr('src'); return false; }
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
        }
    });
    if (nextPic == "") {
        nextPic = $('.foliolist:first a img').attr('src');
    }
    $('#grouptabs').attr('src', nextPic);
});

$('#btnPrev').click(function(){
    //get current picture displayed
    var currPicSrc = $('#grouptabs').attr('src');
    var foundPic = false;
    var prevPic = "";        
    $('.foliolist a img').each(function(){
        if ($(this).attr('src') == currPicSrc) {
            foundPic = true;
            return false;
        }
        if (!foundPic) {prevPic = $(this).attr('src'); }
    });
    if (prevPic == "") {
        prevPic = $('.foliolist:last a img').attr('src');
    }
    $('#grouptabs').attr('src', prevPic);
});

这是一种方法（我没有管理你在第一张图片上点击上一张/最后一张图片旁边的点击的情况）。

另一种方法是将id添加到您的图像和玩具中（如果您使用<img id="whatever1" /><img id="whatever2" /> [...]之类的名称，这将非常简单，因此您可以使用ID中的数字获取当前图片然后循环那个。

使用图像绑定点击事件到页面

1 个答案: