jQuery单击下一个元素

Posted 2023-02-25

【中文标题】jQuery单击下一个元素

【英文标题】：jQuery Click on next element

【发布时间】：2013-01-11 14:04:53

【问题描述】：

我在编写 jQuery 时遇到了问题，希望你能帮助我，即使像外星人一样会说英语 %)。

我正在做一个水平滚动的网站，你可以在这里看到它http://www.kinetics.ru/index_kin.html 我在左侧有一个菜单，在底部有两个按钮 PREV 和 NEXT。 菜单工作正常，但我需要让底部按钮工作。 例如，通过单击 NEXT，我需要该代码在具有样式“on”的菜单之后单击下一个菜单 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();
    );
);   

附：对不起我的问题。我刚接到一项工作要做一个网站，没有人关心设计师与网页设计师不同。我没有先学的可能，我必须同时学习和做。

【参考方案1】：

您必须检查 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...

【讨论】：

感谢您的回复！我现在就测试一下。另外，我刚刚注意到您的屏幕截图中的代码与我的文件完全不同（首先我的消息中最后 3 行 HTML 代码与您编写的完全相同）。为什么我的原始代码和萤火虫显示的代码有这么大的不同，我真的不知道哦....我也需要了解这个....

【参考方案2】：

解决了！ 再次感谢你！ 你的代码真的很有帮助。 我已经根据自己的需要对其进行了一些修改，并且也进行了相应的更改

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 在代码中表现出如此大的灾难......我忘了关闭标签 :)))

无论如何...非常感谢您！

附：第三天阅读一本关于 jQuery 的巨著 :)