触发“下一个” Niall Doherty 的尾声滑块 2.0 中的帧 - 可以使用 JavaScript .change 事件吗？

Question

我一直在努力让自己发疯，试图让这项工作成功。我的尝试的变化变得非常尴尬 - 我似乎无法弄清楚尼尔滑块希望我做什么，以便触发滑块进入下一帧而不点击任何东西。

我想要的是当表单元素更改时滑块滑动到下一帧。因此，对于 jQuery，这应该像这样简单：

$(document).ready(function()  
 {  
  $('#radioButton').change(function(){  
   GO TO THE NEXT FRAME  
  });  
 })  

但显然它并不那么简单。我已经尝试了很多事情。一些令人绝望的事情。主要是试图触发他的部分代码。似乎使下一帧发生的代码是这样的代码：

    $('#coda-nav-right-' + sliderCount + ' a').click(function(){
        navClicks++;
        if (currentPanel == panelCount) {
            offset = 0;
            currentPanel = 1;
            alterPanelHeight(0);
            slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
        } else {
            offset = - (panelWidth*currentPanel);
            alterPanelHeight(currentPanel);
            currentPanel += 1;
            slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().next().find('a').addClass('current');
        };
        $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
        if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
        return false;
    });

它是我对 JavaScript 的平庸和对 Niall 的代码相当不熟悉的结合。评论很好，但我无法确切地说出每一行发生了什么。当我看到时，我不太确定如何使用我的 .change 函数来实现同样的事情。

无论如何，如果有人能阐明这一点，我将非常感激。我想如果我能得到帮助来解决这个问题，它也可能对我有很大帮助。我认为这里有一些关于 JavaScript 的东西我不理解，但我不知道它是什么。

Answer 1

您可以使用无参数 click() 函数以编程方式单击链接在 jQuery 中。假设您使用与大多数示例相同的设置，您应该能够编写如下内容：

HTML：

<input type="radio" id="next-panel" />

JavaScript：

$("#next-panel").bind("change", function() {
    $("#coda-nav-right-1 > a").click();
});

这将单击演示中“正确”链接的默认位置中的链接。您可以在此处查看一个工作示例： http://jsfiddle.net/andrewwhitaker/WzJMP/

旁注：您是否考虑过使用jQueryUI 选项卡？ jQueryUI 具有更可用且文档齐全的 API，您可以轻松地重新创建 Coda 滑块的效果和功能。您还可能在 StackOverflow 等网站上获得更好的支持。