创建下一个/上一个导航
我正在开发一个具有多个部分的网站,每个部分包含大约 5-10 个项目。我正在尝试创建一个下一个/上一个导航,使您可以滚动浏览每个部分中的项目。这是我的代码:
var prev_li = $('.projects ul li.selected').prev('li'),
prev_href = $(prev_li).children().attr('href'),
next_li = $('.projects ul li.selected').next('li'),
next_href = $(next_li).children().attr('href');
$('#previous-project').click(function(e){
if ($(prev_li).length) {
window.location = prev_href;
return false;
} else {
window.location = last_href;
return false;
}
});
然后是下一个项目的代码。我的问题是存在重复的项目(有些项目位于多个部分)。这意味着多个项目具有相同的 URL,因此某些项目在真正未被选中时将获得“selected”类。这意味着,当您位于多个部分中的项目并单击下一个或上一个按钮时,它将从该项目的第一个实例转到上一个项目(即使该项目位于另一个部分中)。我需要一些有效的方法来指定每个部分中的项目列表,因此它只在这些项目中轮换。
我的一个想法是向每个项目列表添加一个类,并执行如下操作:
var traeng_prev_li = $('.transportation-engineering.projects ul li.selected').prev('li'),
traeng_prev_href = $(traeng_prev_li).children().attr('href'),
traeng_next_li = $('.transportation-engineering.projects ul li.selected').next('li'),
traeng_next_href = $(traeng_next_li).children().attr('href');
// same variables for each section
$('#previous-project').click(function(){
if ($(traeng_prev_li).length) {
window.location = traeng_prev_href;
return false;
} else if ($(struct_prev_li).length) {
window.location = struct_prev_href;
return false;
} else if ($(civil_prev_li).length) {
window.location = civil_prev_href;
return false;
} else if ($(archi_prev_li).length) {
window.location = archi_prev_href;
return false;
.... //all the way down through all the sections
这样做的问题是a)效率非常低b)我认为即使你不在该列表中,它仍然有一个长度那么问题仍然存在?
I am working on a site that has multiple sections, each with around 5-10 projects within them. I am trying to create a next/previous navigation that will allow you to scroll through the projects within each section. This is the code I had for this:
var prev_li = $('.projects ul li.selected').prev('li'),
prev_href = $(prev_li).children().attr('href'),
next_li = $('.projects ul li.selected').next('li'),
next_href = $(next_li).children().attr('href');
$('#previous-project').click(function(e){
if ($(prev_li).length) {
window.location = prev_href;
return false;
} else {
window.location = last_href;
return false;
}
});
And then the same from the next project. My problem is that there are duplicate projects (some projects are in multiple sections). This means that multiple projects have the same URL and so some projects will get the class of "selected" when they really are not selected. This means that when you are on a project that is in multiple section and click the next or previous button, it will go to the previous project from the first instance of the project (even if that is in another section). I need some efficient way to specify the list of projects within each section and so it only rotates through those projects.
One idea I had was to add a class to each list of projects and do something like this:
var traeng_prev_li = $('.transportation-engineering.projects ul li.selected').prev('li'),
traeng_prev_href = $(traeng_prev_li).children().attr('href'),
traeng_next_li = $('.transportation-engineering.projects ul li.selected').next('li'),
traeng_next_href = $(traeng_next_li).children().attr('href');
// same variables for each section
$('#previous-project').click(function(){
if ($(traeng_prev_li).length) {
window.location = traeng_prev_href;
return false;
} else if ($(struct_prev_li).length) {
window.location = struct_prev_href;
return false;
} else if ($(civil_prev_li).length) {
window.location = civil_prev_href;
return false;
} else if ($(archi_prev_li).length) {
window.location = archi_prev_href;
return false;
.... //all the way down through all the sections
The problem with this is a) it is terribly inefficient and b) I think even if you are not on that list, it still has a length and so the problem still persists?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在指定部分的网址末尾添加哈希值,
例如
/projects/poplar_street_roundabou#transportation-facilities
然后您可以在查找时使用
location.hash
来定位特定部分next/prev逐步解释
当 url 具有
#transportation-facilities
(称为哈希)时,我们可以通过 javascript 访问它window.location.hash
属性。但它也会返回
#
字符,因此我们需要使用substring()
方法。现在,在 jquery 中,我们需要定位具有
projects
类和transportation-facilities
类的元素内的ul
。在 CSS 中,这是通过使用多类选择器
例如,.class1.class2
将匹配同时分配了class1
和class2
的元素。所以这一行
翻译成
add hashes at the end of the urls that specify the section
like
/projects/poplar_street_roundabou#transportation-facilities
then you can use the
location.hash
to target the specific section when finding next/prevkind of step by step explanation
when the url has a
#transportation-facilities
(called hash) we can access it from javascript with thewindow.location.hash
property.but it will return the
#
char as well, so we need to remove it by using thesubstring()
method.Now in jquery we need to target the
ul
that is inside an element that has theprojects
class but also thetransportation-facilities
class. In CSS this is achieved by using themultiple class selector
for example.class1.class2
will match elements that have bothclass1
andclass2
assigned to them.so this line
translates to