Javascript 从一个UL移动到另一个UL。下一个
我陷入了一些似乎可能的事情,我只是两天都没能弄明白 我的.js文件中有:Javascript 从一个UL移动到另一个UL。下一个,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我陷入了一些似乎可能的事情,我只是两天都没能弄明白 我的.js文件中有: Mousetrap.bind('right', function() { $('li.active').next().click(); }); Mousetrap.bind('left', function() { $('li.active').prev().click(); }); 上面是绑定键盘的右/左键,以便在UL on键盘上的所有LI中移动 然后在我的HTML中有这个;这是两个UL 此时,当我击中第一个UL中
Mousetrap.bind('right', function() { $('li.active').next().click(); });
Mousetrap.bind('left', function() { $('li.active').prev().click(); });
上面是绑定键盘的右/左键,以便在UL on键盘上的所有LI中移动
然后在我的HTML中有这个;这是两个UL
此时,当我击中第一个UL中的最后一个项目时,它停止。我试图让它跳到下一个李在下面的UL
我试着找出如何使用,但没有用,有人有什么想法吗
<div class="item active">
<ul class="thumbnails">
<li class="trigger active" data-target="0" data-fieldclass="data1">
<p class="image"><img src="images/sias-duplessis.jpg" alt="Sias Du Plessis"></p>
<p>@siasduplessis</p>
<p>#RedFury</p>
</li>
<li class="trigger" data-target="1" data-fieldclass="data2">
<p class="image"><img src="images/lance-witten.jpg" alt="Lance Witten"></p>
<p>@LanceTheWitten</p>
<p>#pegasus</p>
</li>
<li class="trigger" data-target="2" data-fieldclass="data3">
<p class="image"><img src="images/sasha.jpg" alt="Sasha Martinengo"></p>
<p>@F1sasha</p>
<p>#BallztotheWallz</p>
</li>
<li class="trigger" data-target="3" data-fieldclass="data4">
<p class="image"><img src="images/sipho.jpg" alt="Comrade Sipho"></p>
<p>@comradesipho</p>
<p>#badexample</p>
</li>
<li class="trigger" data-target="4" data-fieldclass="data5">
<p class="image"><img src="images/carl-wastie.jpg" alt="Carl Wastie"></p>
<p>@carlwastie</p>
<p>#FrickinHORSome</p>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="trigger" data-target="5" data-fieldclass="data6">
<p class="image"><img src="images/craig-stack.jpg" alt="Craig Stack"></p>
<p>@Craig_Stack</p>
<p>#eldiablo</p>
</li>
<li class="trigger" data-target="6" data-fieldclass="data7">
<p class="image"><img src="images/cale-pisarra.jpg" alt="Cale Pisarra"></p>
<p>@calepissarra</p>
<p>#thedirtyseagull</p>
</li>
<li class="trigger" data-target="7" data-fieldclass="data8">
<p class="image"><img src="images/mr-cpt.jpg" alt="Mr Cape Town"></p>
<p>@MrCPT</p>
<p>#goodoak</p>
</li>
<li class="trigger" data-target="8" data-fieldclass="data9">
<p class="image"><img src="images/life-is-savage.jpg" alt="Life Is Savage"></p>
<p>@LifeisSavage</p>
<p>#whoyourdaddy</p>
</li>
<li class="trigger" data-target="9" data-fieldclass="data10">
<p class="image"><img src="images/brent-graham.jpg" alt="Brent Graham"></p>
<p>@BrentGraham</p>
<p>#thefalcon</p>
</li>
</ul>
-
@siasduplessis
#红怒
-
@兰斯泰维滕
#飞马座
-
@萨沙
#巴尔兹托特瓦尔兹
-
@西波同志
#坏榜样
-
@卡尔瓦斯蒂
#弗里金霍索姆酒店
-
@克雷格·斯塔克
#埃尔迪亚布洛
-
@卡莱皮沙拉
#第十五只海鸥
-
@MrCPT
#古德奥克
-
@终身储蓄
#你爸爸是谁
-
@布伦特格拉姆
#特弗尔康
那么:
Mousetrap.bind('right', function() {
if ($('li.active').is(':last-child'))
obj = $('li.active').parents('ul').next('ul').find('li').first();
else obj = $('li.active').next();
obj.click();
});
您可以使用这种方法
function NextClick()
{
var li = $('ul.thumbnails li.active');
var index = $("ul.thumbnails li").index(li);
$("ul.thumbnails li").eq(index + 1).click();
}
function PrevClick()
{
var li = $('ul.thumbnails li.active');
var index = $("ul.thumbnails li").index(li);
if(index > 0)
$("ul.thumbnails li").eq(index - 1).click();
}
请参见中的工作示例
您也可以尝试Chuck Norris代码您可以引用“数据目标”属性作为参考
您的标记上可能还缺少一个结尾
Mousetrap.bind('right', function() {
new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) + 1) +'"]');
$('ul li').removeClass('active');
new_active_li.addClass('active');
new_active_li.click();
});
Mousetrap.bind('left', function() {
new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) - 1) +'"]');
$('ul li').removeClass('active');
new_active_li.addClass('active');
new_active_li.click();
});
只要做一个简单的测试就可以做到
var test = $("ul li.last").next().html();
if(test == 'undefined'){
// jump to next list
var nextList = $("li.active").parent().parent().next().find("ul");
}else{
// the normal code
}
谢谢你,陈,但它似乎没有跳到下一个列表?还是在最后一项上被卡住了?参考:要在JSFIDLE中进行测试,只需单击红色区域,使答案区域处于活动状态。然后你可以使用键盘。如果你从1->10开始,然后再试一次,它会返回到6。我怎样才能让它重新回到开头?@ChrisEdington试试编辑过的那个,别担心,我哪儿也不去,只留下你一个人middle@Ankit,从第二个ul的第一项返回时仍然存在问题。使用我的答案,而不是这个,它做同样的,用更少的代码和没有问题。谢谢你们两个@ChuckNorris当我实现你的代码时,它不会超过数字6?不,它会从1变为10,也会向后。
var test = $("ul li.last").next().html();
if(test == 'undefined'){
// jump to next list
var nextList = $("li.active").parent().parent().next().find("ul");
}else{
// the normal code
}