jQuery单击下一个元素

时间:2013-01-11 14:04:54

标签: jquery-selectors jquery next

我有编程jQuery的问题,我希望你能帮助我,即使说英语就像外星人%)。

我正在做一个水平滚动的网站,你可以在这里看到它http://www.kinetics.ru/index_kin.html 我左边有一个菜单,底部有两个按钮PREV和NEXT。 菜单工作正常,但我需要让底部按钮工作。 通过点击例如NEXT,我需要在下一个菜单btn之后点击一个样式为'on'的代码。

代码是:

<div class="menu">
        <ul class="nav">
           <li id="main"><a href="#about"><img src="img/menu/about.png" /></a></li>
           <li><a href="#uslugi"><img src="img/menu/uslugi.png"/></a></li>
           <li><a href="#portfolio"><img src="img/menu/portfolio.png"/></a></li>
           <li><a href="#clients"><img src="img/menu/clients.png"/></a></li>
           <li><a href="#contacts"><img src="img/menu/contacts.png"/></a></li>
        </ul>
    </div>
...
<div class="bottomNav" style="position: absolute; z-index: 11">
<div style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed" class="back"><img src="img/back.png"</div>
<div style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" id="next"><img src="img/forward.png"</div>

我的下一个btn没有用jQuery代码:

$('bottomNav, #next img').click(function(){
    if ($('ul.nav').find('img').hasClass('on')){
        $('ul.nav').next().click();
    }
});   

我也试过这样做:

    $('bottomNav, #next img').click(function(){
    $('ul.nav img').click(function(){
        if ($(this).hasClass('on')){
            $(this).next().click();}
    });
});   

P.S。对不起我的noobish问题。我只是在工作中创建一个网站,没有人关心设计师与网页设计师不一样。我没有可能先学习,我必须同时学习和做。

2 个答案:

答案 0 :(得分:1)

你必须检查jQuery选择器以及你的HTML代码,这是非常错误的。萤火虫说:

enter image description here

我以正确的方式修改了代码:

<div class="bottomNav" style="position: absolute; z-index: 11">
    <div id="prev" style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed">
        <img src="img/back.png" />
    </div>
    <div id="next" style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" >
        <img src="img/forward.png" />
    </div>
</div>

JavaScript(这很简单,我没有测试它,但它应该给你一个想法)。

$('#prev').click(function () {
    var $activeLi = getActiveLi();
    var $prevLi = $parentLi.prev();

    if ($prevLi.length > 0) {
        $prevLi.find('a').click();
    }
});

$('#next').click(function () {
    var $activeLi = getActiveLi();
    var $nextLi = $parentLi.next();

    if ($nextLi.length > 0) {
        $nextLi.find('a').click();
    }
}); 

function getActiveLi() {
    var $activeImg = $('.menu .nav img.on');
    var $activeLi = $activeImg.closest('li');

    return $activeLi;
};

但是要认真对待:在继续开发您的网站之前,您应该认真学习使用jQuery以及如何构建HTML ...

答案 1 :(得分:0)

解决! 再次感谢你! 你的代码非常有用。 我已根据我的需要对其进行了一些修改,并在行中进行了更改

var $activeLi = $activeImg.closest('li');

最接近('li')父母('li'),因为它没有像那样工作。

所以现在代码看起来像这样:

$('#prev').click(function () {
    var $prevLi = getActiveLi().prev();
    if ($prevLi.length > 0){$prevLi.find('img').click();}
});

$('#next').click(function () {
    var $nextLi = getActiveLi().next();
    if ($nextLi.length > 0){$nextLi.find('img').click();}
});

function getActiveLi() {
var $activeImg = $('.menu .nav img.on');
var $activeLi = $activeImg.parents('li');
return $activeLi;
};

我想,我已经理解为什么萤火虫在代码中显示出如此大的灾难...我忘了关闭标签:)))

无论如何......非常感谢你!

P.S。第三天阅读一本关于jQuery的大书:)