-1

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

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

我做了一堆搜索，但没有找到满意的答案。我对 Javascript 和 jQuery 非常陌生，所以如果你有代码片段给我，请彻底解释它们。

这应该是一个简单的问题（类似于on-click等）。我还没有找到答案，我感到非常惊讶和沮丧。

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

// add capability to detect when accordion tab has been clicked

RegFormAccordion.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
    {
        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
    }
    })()

} );
4

2 回答 2

0

好的。我找到了 SpryAccordion.js 用来打开新面板的函数并添加了我自己的代码。简单而优雅。这不是我通常会做的（通常我不理会“图书馆”）。但是，如果你让它可编辑而没有给我另一种方式来获得所需的控制，那么黑客就会发生。

如果我需要在我的网站上的其他地方使用另一个手风琴，我必须在调用 hack 之前仔细检查我是否拥有正确的手风琴。我愿意做出权衡。它现在完美运行。这是代码：

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)

{

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

…………

};

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

我希望这可以帮助人们更好地控制自己的手风琴。很高兴我不需要上 jQuery 速成课程，因为我现在只想启动我的破网站。

于 2012-10-08T06:44:55.343 回答
0

事件委托。

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

} );

但是，如果您支持较旧的浏览器，则必须对 IE<=8 进行规范化，因为它使用专有的 attachEvent 方法。点击 quirksmode.org 了解详细信息，或者只使用 jQuery 或 MooTools 之类的东西。

于 2012-10-05T22:48:33.103 回答