jQuery单击下一个元素

mgdq6dx1 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(126)

我有一个问题，编程jQuery，我希望你能帮助我，即使一个说英语像一个外国人%）。
我正在做一个网站与水平滚动，你可以看到它在这里http://www.kinetics.ru/index_kin.html我有一个菜单在左边和两个按钮PREV和NEXT在底部。菜单工作正常，但我需要让底部按钮工作。通过点击例如NEXT我需要的代码后，有风格的一个点击下一个菜单btn。
代码为：

<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.抱歉我的问题。我刚刚在工作中得到了一个任务，使一个网站，没有人关心，一个设计师是不一样的网页设计师。我不可能先学，我必须边学边做。

jquery

来源：https://stackoverflow.com/questions/14279774/jquery-click-on-next-element

2条答案

按热度按时间

i7uq4tfw1#

你必须检查jQuery选择器和HTML代码，这是非常错误的。Firebug说：

我用正确的方式修改了你的代码：

<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。

赞(0）回复(0）举报 2023-06-22

xmjla07d2#

解决了！再次感谢！你的代码真的很有用。我已经修改了一点点，为我的需要，也改变了线

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;
};

另外我想，我已经明白为什么firebug在代码中显示出如此大的灾难。。我忘了关闭标签：）））
无论如何...非常感谢你！
P.S.第三天阅读一本关于jQuery的巨书：）

赞(0）回复(0）举报 2023-06-22

我来回答

jQuery单击下一个元素

2条答案

相关问题

热门标签

最新问答