-1

登録を処理するためにアコーディオンを設定しました。ユーザーが別のパネル タブをクリックしたときに、各パネルに入力されたデータを検証したいと考えています。各パネルに続行ボタンがあり、ユーザーがそれを使用して次のパネルに移動するときに、心ゆくまで検証できます。

私の問題は、アコーディオン タブを個別にクリックすることもできることです (編集目的でスキップできるようにしたいです) が、それらのイベントについても検証したいと思います。

たくさんの検索を行いましたが、満足のいく答えが見つかりませんでした。私は Javascript と jQuery をまったく初めて使用するので、コード スニペットがある場合は、それらを徹底的に説明してください。

これは簡単な問題です ( などに似ていon-clickます)。私はまだ答えを見つけていないことに非常に驚き、イライラしています。

編集：
エリック、これを機能させることができませんでした。これが私のバージョンです。頭の部分に入れました。過去に確実に機能したテストコードがいくつかあります（タブの1つのラベルを変更します）。このコードがうまくいったと思いますか? とにかく、あなたの助けに感謝し、お互いを十分に理解したと思います.

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

イベントの委任。

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 に答える
0

わかった。SpryAccordion.js が新しいパネルを開くために使用する関数を見つけ、独自のコードを追加しました。シンプルでエレガント。それは私が通常行うことではありません（通常、「ライブラリ」はそのままにしておきます）。しかし、必要な制御を行う別の方法を提供せずに編集可能にすると、ハッキングが発生します。

Web サイトの別の場所で別のアコーディオンを使用する必要がある場合は、ハックを呼び出す前に正しいアコーディオンがあることを再確認する必要があります。私が喜んで行うトレードオフ。今では完全に機能します。コードは次のとおりです。

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 に答える