javascript - テンプレートの.trigger（）コードを書く方法は？

Question

以下の表にはテキストボックスが含まれており、テキストボックスの横には「OpenGrid」と呼ばれるハイパーリンクが含まれています。ユーザーがこのリンクをクリックすると、グリッドが開き、このグリッドに3〜26の数字ボタンが表示されます。

<table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="option">
    <td>1. Option Type:</td>
    <td>
    <div class="box">
        <input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" />
        <span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
    </div>


    <table class="optionTypeTbl">
    <tr>

        <tr><td><input type="button" value="3" id="btn3" name="btn3Name" class="gridBtns gridBtnsOff">

        <input type="button" value="4" id="btn4" name="btn4Name" class="gridBtns gridBtnsOff">
        <input type="button" value="5" id="btn5" name="btn5Name" class="gridBtns gridBtnsOff">
        <input type="button" value="6" id="btn6" name="btn6Name" class="gridBtns gridBtnsOff">

        //...goes all the way to btn26
            </tr>

            </table>

            </td>
    </tr>
</table>

これで、以下のコードは、グリッドボタンの1つをトリガーして、グリッドボタンがクリックされたことを示すことができます。このコードは以下のとおりです。

$('#btn'+gridValues).trigger('click');

これで、上記のすべてが正常になりました。

問題：

私が抱えている問題は、ユーザーが上部のオプションコントロールと同じテンプレートを含む行を追加できることです。ただし、このオプションと回答のコントロール内で、ユーザーはこのテンプレートのグリッドボタンの1つをクリックして、必要に応じてオプションの種類を変更できます。.trigger()だから私の質問は、このテンプレート内のグリッドボタンを正しく指すようにどのように書くのですか？上記のコードを見ると、ボタンのIDを使用していますが、テンプレートを実行する以下のコードを見ると、IDは含まれていません。単に、オプションとコントロール機能を上からテンプレートにコピーするだけです。

以下はテンプレートです：

function insertQuestion(form) {    

 var context = $('#optionAndAnswer');

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $options = $("<div class='option'>Option Type:<br/></div>");
    var $questionType = '';

    $('.gridTxt', context).each( function() {

    var $this = $(this);
    var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
    .attr('name',$this.attr('name')+"[]")
    .attr('value',$this.val())
    .appendTo( $options )
    .after("<span href='#' class='showGrid'>[Open Grid]</span>");

    $questionType = $this.val();

    });


    $td.append($options);
    $tbody.append($tr); 

}

アップデート：

このアプリケーションのURLをここに作成しました。次の手順に従ってアプリケーションを使用すると、何が起こっているかを確認できます。

ステップ1：アプリケーションを開くと、ページに緑色のプラスボタンが表示され、それをクリックすると、モーダルウィンドウが表示されます。
ステップ2：モーダルウィンドウに検索バーがあり、「AAA」と入力して検索を送信すると、一連の行が表示されます。
ステップ3：最初の行の[オプションタイプ] ADの下に、この行内の[追加]ボタンをクリックすると、モーダルウィンドウが閉じ、右側の灰色のテキストボックスに[オプションタイプ]テキストボックスが表示されます。 4に等しく、回答ボタンA、B、C、およびDが表示されます。これは、覚えているように、その行のオプションタイプが「AD」であったためです。

これで正常に機能しますが、最上位のオプションと回答コントロールでのみ機能します。以下の手順に従ってください。

ステップ4：[質問の追加]ボタンをクリックすると、オプションの詳細と回答コントロールを含む行が下に追加されます。
ステップ5：追加した行の左側に緑色のプラスボタンが表示されたら、このボタンをクリックして、検索ボックスで同じ検索「AAA」を実行します。
ステップ6：今回は、[追加]ボタンをクリックして最後の行を選択します。この行の[オプションの種類]は[AG]であるため、[回答]ボタンA、B、C、D、E、F、およびG、しかしそれはこれをしません、それはまだ「A、B、C、D」を述べます。

では、追加された行の1つにあるオプションと回答コントロールの回答ボタンの表示を変更するにはどうすればよいですか？

アプリケーションのaddwindow()ビューソースに表示される機能は、「追加」ボタンがクリックされた後に発生する機能です。[追加]ボタンは付属のPHPスクリプトにあり、このボタンのコードは以下のとおりです。モーダルウィンドウで検索を実行した後に表示されるすべての列が含まれています。

     echo "<table border='1' id='resulttbl'>
      <tr>
      <th class='questionth'>Question</th>
      <th class='optiontypeth'>Option Type</th>
      <th class='noofanswersth'>Number of <br/> Answers</th>
      <th class='answerth'>Answer</th>
      <th class='noofrepliesth'>Number of <br/> Replies</th>
      <th class='noofmarksth'>Number of <br/> Marks</th>
      </tr>";
      foreach ($searchResults as $key=>$question) {
        echo '<tr class="questiontd"><td>'.htmlspecialchars($question).'</td>';
        echo '<td class="optiontypetd">'.htmlspecialchars($searchOption[$key]).'</td>';
        echo '<td class="noofanswerstd">'.htmlspecialchars($searchNoofAnswers[$key]).'</td>';
        echo '<td class="answertd">'.htmlspecialchars($searchAnswer[$key]).'</td>';
        echo '<td class="noofrepliestd">'.htmlspecialchars($searchReply[$key]).'</td>';
        echo '<td class="noofmarkstd">'.htmlspecialchars($searchMarks[$key]).'</td>';
        echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$question','$searchMarks[$key]','$searchNoofAnswers[$key]','$searchOption[$key]','$searchReply[$key]','$searchAnswer[$key]');\">Add</button></td></tr>";
}
      echo "</table>";

score 0 · Accepted Answer

残念ながら、私は悪いニュースの担い手にならなければなりません。あなたが抱えている問題は、全体的なデザインに起因しています。あなたの HTML と JavaScript は、すべての JavaScript を単一の $(function(){...}) 構造、つまり同じスコープにすることを目的としたボトムアップのオーバーホールが本当に必要です。これを達成するには、次のことを行う必要があります。

HTML 属性アプローチ (現在はハイブリッド) を優先して、すべてのイベントハンドラーを JavaScript でアタッチします。
AJAX 経由で以前の質問をフェッチするために、iFrame をパージします。

その過程で、いくつかの重複したクリック処理 (およびボタンイメージとその<a>...</a>ラッパー) も削除します。

次に、問題の解決策を見つけ始めることができます:

元の「オプションと回答」ブロックに関連付けられたすべてのイベント処理を、それと将来のすべての「オプションと回答」ブロックに共通のコンテナーに委任します。共通のコンテナはdocument、より具体的なものであることが望ましいです。これは、すでに部分的に達成されているようです。
元の「オプションと回答」ブロック内のすべての内部参照が、id ではなくクラスで機能することを確認します。.closest()ここで.find()役に立ちます。
「+」ボタンをクリックすると、「オプションと回答」ブロックへの参照が保存されます (たとえば、相対的に発見されたコンテナを表す jQuery オブジェクト)。$(function(){...})最も簡単な方法は、この参照をスコープ内の変数に格納することです。(今、あなたはこれらすべての構造的な変更を行うことから恩恵を受けています)。「追加」ボタンのクリックハンドラーは、この参照を使用して、正しい「オプションと回答」ブロックに影響を与えます。
「質問を追加」で、jQuery を使用.clone(true, true)して元のブロックのコピーを作成します (次に、クローンを DOM に挿入します)。他の修正が適用されている場合は、すべての機能 (クリックハンドラー) が自動的にクローンにアタッチされます。

私は非常に迅速に作業しますが、これにはまだ1〜2日かかります.

これが私がjavascriptを整理する方法です。

$(function() {
    // **********
    // Data area
    // **********
    var $$ = { // reusable static jQuery objects
        'optionTypeTbl': $('#optionTypeTbl'),
        'o_and_a_proto': $("#proto"),
        'o_and_a_extras': $("#extras"),
        'modal': $("#modal")
    },
    $o_and_a_section = null;

    // ******************
    // Utility functions
    // ******************
    function trim(str) {
        return str.replace(/(^\s*)|(\s*$)/gi, "") // removes leading and trailing spaces
            .replace(/[ ]{2,}/gi," ") // replaces multiple spaces with one space 
            .replace(/\n +/,"\n"); // Removes spaces after newlines
    }

    // ****************
    // Initial actions
    // ****************
    $$.modal.hide();
    $("input.gridBtns").removeClass("gridBtnsOn");
    $("input.answerBtns").removeClass("answerBtnsOn");
    $$.optionTypeTbl.hide();
    // code above makes sure all buttons start in the OFF state (so all button are white).

    // **********************************************
    // Handlers for elements inside the main window
    // **********************************************
    $(document).on('click', function() {
        $$.optionTypeTbl.fadeOut('slow');
    });
    $("input.gridBtns", $$.optionTypeTbl).on('click', function() {
        var $this = $(this);
        var $container = $this.closest('.optionAndAnswer');
        $container.find(".gridBtns").removeClass("gridBtnsOn");
        $this.addClass("gridBtnsOn");
        $container.find(".gridTxt").val($this.val());
        //$container.siblings('span[name=gridValues[]]').val($this.val()); // ???
        $container.find('.answerBtns').each(function(index) {
            if (index < Number($this.val())) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    $$.o_and_a_proto.find(".showGrid").on('click', function(e) {
        var $this = $(this);
        var $container = $this.closest(".optionAndAnswer");
        $("input.gridBtns").removeClass("gridBtnsOn");
        var value = $container.find(".gridTxt").val();
        //$("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn"); //???
        $$.optionTypeTbl.appendTo($this.closest("div.box")).show().css({
            left: $this.position().left,
            top: $this.position().top + 20
        });
        e.stopPropagation();
    });
    $$.o_and_a_proto.find(".plusimage").on('click', function() {
        $o_and_a_section = $(this).closest(".optionAndAnswer");
        $$.modal.modal();
    });
    $$.o_and_a_proto.find(".answerBtns").on('click', function() {
        //btnclick(this); // ???
    });
    $("#addQuestionBtn").on('click', function insertQuestion() {
        $$.optionTypeTbl.hide().appendTo(document);//ensure this itinerant table is not cloned
        $$.o_and_a_extras.append($$.o_and_a_proto.clone(true,true).attr('id','')).find("span#plussignmsg").remove();
    });

    // **********************************************
    // Handlers for elements inside the modal window
    // **********************************************
    $$.modal.find("#close").on('click', function() {
        $.modal.close();
        return false;
    });
    $$.modal.find("form").on('submit', function() {
        var form = $(this).get(0);
        $.ajax({
            url: 'previousquestions.php',
            data: {
                'searchQuestion': 1,
                'questioncontent': trim(form.questioncontent.value)
            },
            type: "get",
            success: function(html) {
                $("#searchResults").html(html);
            },
            error: function() {
                alert("Something went wrong");
            }
        });
        return false;
    });

    $$.modal.find("#searchResults").on('click', 'button.add', function() {
        var $container = $(this).closest("tr");
        var g = $container.find("optiontypetd").data('g');
        var btn = $container.find("answertd").text();
        $o_and_a_section.find("input.gridTxt").val(g);
        if($o_and_a_section.closest("#detailsBlock").length) { //if is original Options and Answers section
            //do something ???
            //$('#btn'+g).trigger('click'); //???
        }
        $.modal.close();
    });
});

これはある程度機能しますが、HTML と CSS に関連する変更が必要になることに注意してください。

javascript - テンプレートの.trigger（）コードを書く方法は？

1 に答える 1

Related

Reference