Question

为了更好地解释这一点，我有一个测试网站，您可以在哪里看到我的问题：http://andraecruz.com/_dev/1/index.html

在这里，我创建了2个页面。导航以锚链接标签的形式设置，因此当我点击第1项时，它会跳转到第二页，ID为#itemOne。这工作正常，因为它在每张幻灯片上找到正确的ID。但是当你点击导航上的另一个项目时，正确的顺序就会混乱。但是，当您直接转到http://andraecruz.com/_dev/1/main.html时，导航似乎工作正常。

我是jQuery的新手，这对于这个可能不是最好的代码解决方案。任何人都可以帮我解决这个问题吗？感谢。

要查看我的HTML标记，请点击上面的链接，只需查看页面上的来源，查看我的两个页面的代码（index.html和main.html）。

由于我在锚标签中导航，它会在我的第二页上找到与我的幻灯片匹配的ID。当你再次点击导航时，它根本不起作用。 jQuery不知道它会在匹配的任何ID上滑动，因为点击来自第一页。

以下是我的js代码： $（函数（）{

$('.item1').click(function(){
    $('#itemOne').animate({left:'0'});
    $('#itemTwo').animate({left:'1000px'});
    $('#itemThree').animate({left:'2000px'});
    $('#itemFour').animate({left:'3000px'});
})
$('.item2').click(function(){
    $('#itemOne').animate({left:'-1000px'});
    $('#itemTwo').animate({left:'0'});
    $('#itemThree').animate({left:'1000px'});
    $('#itemFour').animate({left:'2000px'});
})
$('.item3').click(function(){
    $('#itemOne').animate({left:'-2000px'});
    $('#itemTwo').animate({left:'-1000px'});
    $('#itemThree').animate({left:'0'});
    $('#itemFour').animate({left:'1000px'});
})
$('.item4').click(function(){
    $('#itemOne').animate({left:'-3000px'});
    $('#itemTwo').animate({left:'-2000px'});
    $('#itemThree').animate({left:'-1000px'});
    $('#itemFour').animate({left:'0'});
})

}）;

Answer 1

我不确定我能否像你描述的那样重现你的问题，但我会在这里建议一个解决你的问题的解决方案。首先，为所有幻灯片提供一个共同的类（例如XAML）。对所有链接执行相同操作（例如clear-all）。现在，为您的每个链接分配一个class="slide"，其值为＆＃34;一个＆＃34;，＆＃34;二个＆＃34;，＆＃34;三个＆＃34;和＆＃34;四＆＃34; （例如class="item-link"表示链接＆＃34;项目1＆＃34;）。

现在，我们的想法是仅为与所点击的链接相对应的幻灯片设置动画，并隐藏所有其他幻灯片。所以，你的jQuery代码会是这样的（不能从我的位置进行测试，但是应该可以在任何语法错误的情况下工作）：

data-item

这可能会产生一些不良影响，例如“删除”等。例如，在滑动新滑块并始终向右滑动之前的当前滑块。如果你能为我提供一个JS小提琴你的页面的完整代码，我相信我可以帮助你做出必要的调整。

修改

好的，对我原来的答案进行了一些更改，got your fiddle working正如我所想的那样。希望能帮助到你。：）

如何在jQuery中找到锚定元素的当前位置？

1 个答案: