Javascript 我如何知道何时选择了新的（Spry）手风琴选项卡（类似于“点击”按钮）？我想附上我自己的行为

我有一个手风琴来办理登记手续。我想在用户单击不同的面板选项卡时验证在每个面板上输入的数据。我在每个面板上都有一个“继续”按钮，当用户使用该按钮转到下一个面板时，我能够验证我的内心内容

我的问题是，他们也可以独立点击手风琴选项卡（我希望他们能够跳过编辑目的），但我也想验证这些事件

我已经搜索了很多次，但没有找到满意的答案。我对Javascript和Jquery都是相当陌生的，所以，如果您有代码片段给我，请仔细解释它们

这应该是一个简单的问题（类似于单击等）。我很惊讶也很沮丧，我还没有找到答案

编辑： 埃里克，我没法让它工作。这是我的版本。我把它放在头部。我有一些测试代码，过去对我来说是可靠的（更改其中一个选项卡上的标签）。我假设这个代码对你有用？无论如何，谢谢你的帮助，我希望我们已经充分了解对方

//添加检测何时单击手风琴选项卡的功能

RegFormAccordion.addEventListener（'click'，函数（e）{ 可变元素

(function findAccordionButton(el){

    //e.target is the original element actually clicked on
    //the event bubbles up to ancestor/parent nodes which is why you can listen at
    //the container

    if(!btnElement){ btnElement = e.target; }
    else { btnElement = el; }

    if(e.target.className !== 'accordionBtn')
    {
        findAccordionButton(btnElement.parentNode);
    }
    else
{
    var curr_panel_index = RegFormAccordion.getCurrentPanelIndex();

        document.getElementById("verify-reg-panel-label").innerHTML = "Index = " + curr_panel_index; // test code to see if it's even getting here

    if (curr_panel_index == 1) // contact section
        {
    ValidateContact();
    }
    else if (curr_panel_index == 2) // payment section
    {
    ValidatePayment();
    }
    UpdateVerifyPanel(); // update contents of verification panel
}
})()

}）

事件委派

someAccordianContainer.addEventListener('click', function(e){
    var btnElement;

    (function findAccordionButton(el){

        //e.target is the original element actually clicked on
        //the event bubbles up to ancestor/parent nodes which is why you can listen at
        //the container

        if(!btnElement){ btnElement = e.target; }
        else { btnElement = el; }

        if(e.target.className !== 'accordionBtn'){
            findAccordionButton(btnElement.parentNode);
        }
        else { doSomething(btnElement); }
    })()

} );

---

你必须正常化IEOK。我找到了SpryAccordion.js用来打开新面板的函数，并添加了我自己的代码。朴素典雅。这不是我通常会做的（通常我不去管“图书馆”）。但是如果你让它可以编辑，而不给我另一种方式来获得所需的控制，那么黑客就要发生了

如果我需要在我的网站上的其他地方使用另一个手风琴，我必须在调用黑客之前仔细检查我是否有正确的手风琴。我愿意做一个权衡。它现在工作得很好。代码如下：

Spry.Widget.Accordion.prototype.openPanel=函数（elementindex）

{

。。。 ...

})

是的，我所需要的是对面板选项卡的控制，就像我对自己的用户定义按钮的控制一样，以确保我可以在继续之前进行验证，并在用户进行任何编辑后更新我的验证屏幕，而不仅仅是他们碰巧点击我的“继续”按钮的屏幕。我是一个快乐的露营者。很高兴我请了几天假

---

我希望这能帮助人们更好地控制自己的手风琴。很高兴我不必在jQuery上做速成课程，而我现在只想把我那该死的网站打开。

你能发布一些手风琴的代码吗。因此，人们能够提供更准确的答案：）在这里发布太多了（此外，我没有时间（但愿我有时间）来弄清楚如何为您设置有用的格式）。这是来自Dreamweaver的基本SpryAccordion。我有一个包裹在它周围的表单，表单元素显示在不同的手风琴面板上。非常基本。我添加了两个带有onclick Javascript函数的“continue按钮”，以在进入下一个面板之前验证当前面板上的表单元素。我想在选项卡按钮上附加相同的功能。真的，这是很简单的。我希望这个解释有帮助。谢谢。所以我想更好地理解这一点，以确保我把一切都放在正确的地方。我想这对Spry有效？因此，如果我读对了代码，那么您正在添加一个事件处理程序，它可以在选择可以选择的对象时被调用，并且只在它是一个手风琴选项卡时才执行操作？除了doSomething（即，您使用的所有类都已经定义了吗？）之外，我还需要编写任何支持代码吗？此外，这将在我的代码中放在哪里？我为我的无知道歉。我是C++程序员，所以JavaScript的松散语法对我来说有点令人困惑。另一个问题是：当找到BTNEL元素时，它是什么样的对象？是账单本身吗？

var panelA = this.currentPanel;
var panelB;

if (typeof elementOrIndex == "number")
    panelB = this.getPanels()[elementOrIndex];
else
    panelB = this.getElement(elementOrIndex);

if (!panelB || panelA == panelB)    
    return null;

// Start Becca's code
var panelIndex = this.getPanelIndex(panelA);
if (panelIndex == 1) // contact info panel
{
   if (ValidateContact())
      UpdateVerifyPanel();
       else
      return null;
}
else if (panelIndex == 2) // payment info panel
{
   if (ValidatePayment())
      UpdateVerifyPanel();
   else
      return null;
}
// End Becca's code

var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);