5

ユーザーが始点をクリックしてから終点をクリックし、選択した 2 つの点の間でさまざまなフォーム要素を操作できるようにしたいと考えています。

ページは多数の行を持つテーブルであり、各行には、その行の質問に対する回答を操作/保存するための関連情報が含まれています。各行には値の非表示の入力と、主にスキルのないユーザー向けの [はい/いいえ] ラジオ ボタンがあります。質問のある TD セルでは、ユーザーはクリックするか、Yes、No、Empty を切り替えることができます。したがって、基本的に、ページのラジオボタンを残してはい/いいえを表示し、非表示フィールドを使用して (1,0,-1) の値を保存します。

これは、質問セルがクリックされたときに回答を設定するために使用するものです。 

    $(".question").bind("click dblclick", function(e) {

        var newClassName = "AnswerUnknown";

        var hiddenAnswerId = $(this).attr('id').replace("question", "answer");

        var answer = parseInt($("#" + hiddenAnswerId).val());

        var newValue;

        switch (answer) {
            case -1:
                newClassName = "AnswerCorrect";
                newValue = 1;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', 'checked');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', '');
                break;
            case 1:
                newClassName = "AnswerWrong";
                newValue = 0;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', '');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', 'checked');
                break;
            default:
                newClassName = "AnswerEmpty";
                newValue = -1;
                $("#" + $(this).attr('id').replace("answer", "radioYes")).attr('checked', '');
                $("#" + $(this).attr('id').replace("answer", "radioNo")).attr('checked', '');
        }
        $("#" + hiddenAnswerId).val(newValue);
        $(this).removeClass().addClass(newClassName);
    });

ここで、ユーザーが開始点をクリックできるようにし、その回答によって、2 番目の項目をクリックした場所まで、次のすべての質問に入力できるようにしたいと考えています。10 問離れている可能性もあれば、20 問離れている可能性もありますが、これは未知の変数です。130 の質問があるページがあり、20 の質問が連続して「はい」である場合があります。上記のように、各行には「質問」セルがあり、その前のセルが項目セルです。

以下にリストされているクリック/dblclickイベントにバインドされたjqueryセレクター/関数に基づいて、開始要素と終了要素を設定する方法を知っています。

私が確信していないのは、dom をトラバースする方法、またはページ上で選択した 2 つのポイント間で操作する必要があるすべての要素を選択する方法です。

    var StartItem;
    var EndItem;

    $(".item").bind("click dblclick", function(e) {

        var StartClassName = "AnswerUnknown";
        var EndClassName = "AnswerUnknown";
        var StartAnswerId;
        var EndAnswerId;
        var StartAnswer;

        if (StartItem === undefined) {
            StartItem = this;
            StartAnswerId = $(this).attr('id').replace("item", "rs");
            StartAnswer = parseInt($("#" + StartAnswerId).val());
        }
        else {
            if (EndItem === undefined) {
                EndItem = this;
                EndAnswerId = $(this).attr('id').replace("item", "rs");
                EndAnswer = parseInt($("#" + EndAnswerId).val());
            }
        }


        if (StartItem == this) {
            $(this).removeClass().addClass(StartClassName);
        }

        if (EndItem == this) {
            $(this).removeClass().addClass(EndClassName);
        }
    });
4

3 に答える 3

2

私見の最善の方法は、以下のようなことをすることです。クラス名が「item」の要素のコレクションをループすることができ、開始要素が見つかったら、記述した処理を開始できます。「this」があるので、その id を取得して、question.click 関数で行っていたことを実行できます。

        var counter = 0;

    // This will loop over each element with classname "item", so make sure you take that into account
            $('.item').each(function(i) {
        // function returns this, but you can see what index your on with 'i'
                if (this == StartItem) {
                    // You can start processing rows
                    counter = 1;
                }
                else {
                    if (counter > 0) {
                        // Process rows/items after the first item above
                        counter = counter + 1;
                    }
                }
                if (this == EndItem) {
                    counter = 0
                    // Finish up processing if any
                    //Break out of each;
                }

            });
于 2009-09-06T19:57:49.117 に答える
0

質問は少し古いですが、これが私のプロジェクトに使用するソリューションです。

jQueryセレクター

(function ($) {
    $.fn.between = function (elm0, elm1) {
        var index0 = $(this).index(elm0);
        var index1 = $(this).index(elm1);

        if (index0 <= index1)
            return this.slice(index0, index1 + 1);
        else
            return this.slice(index1, index0 + 1);
    }
})(jQuery);

使用法 

$('body').between($('#someid'), $('#someid2')).each(function () {
    // Do what you want.
});
于 2011-11-18T07:42:27.070 に答える
0

最も簡単な方法は、開始要素に開始クラスを追加し、終了要素に終了クラスを追加することです。次に、開始と終了の間の要素をトラバースするときに、開始または終了クラス名を確認し、適切なアクションを実行/防止できます。

編集：

このプラグインのようなものがそれを行います。プラグインは、範囲の境界を定義する両方の要素が同じ親を持ち、同じ要素タイプ ( nodeName) であると想定します。独自の開始および終了クラス名を使用するか、単にデフォルトの「開始」および「終了」を使用できます。

(function($) {

  $.fn.rangeSelector = function(options) {   

    var settings = $.extend({ startClass : 'start', endClass: 'end'},options||{}); 
    var name = this[0].nodeName.split(':'); 
    name = name[name.length -1];
    var startIndex = $(name + '.' + settings.startClass).prevAll().length;
    var endIndex = $(name + '.' + settings.endClass).prevAll().length + 1;
    return this.slice(startIndex,endIndex);
  }

})(jQuery);

そして、あなたはそのように使うことができます

/*
 * will get all textboxes between textboxes 
 * with className start and end, inclusive
 */
$('input:text').rangeSelector();

これが実用的なデモです。コードを表示する場合は、URL の末尾に/editを追加します。startClass、endClass、および含める要素タイプのパラメーターに基づいて jQuery オブジェクトを返すユーティリティを作成することを考えていましたが、それは必要なものに対してやり過ぎです。

編集2：

あなたのコメントに照らして、私はそれについてあなたに話すことができます

  1. あなたの場合はテキスト入力であると思われる問題の要素を含むjQueryオブジェクトを取得するため、親が親要素であるようなものになります$('parent > input:text')(他のテキスト入力がある場合、input:textを単独で渡すと正しく機能しません)プラグインはインデックスに依存しているため、親要素の外側のページ)。

  2. 必要に応じて、さまざまな開始クラス名と終了クラス名を使用してオプション オブジェクトを rangeSelector に渡すことができます ( のよう.rangeSelector({ start: "myStartClass", end: "myEndClass"})に、または単にデフォルトstartを使用しますend。その場合、オブジェクトを渡す必要はありません。

  3. settings 変数は、(オブジェクトのプロパティとして定義されている) デフォルトを、渡されたオプション オブジェクト (オプション オブジェクトが定義されていない場合はプロパティのないオブジェクト) のプロパティとマージします。

  4. jQuery オブジェクトで扱っている要素の型を計算し、name変数に格納します。これはnodeName、jQuery オブジェクトの最初の要素の文字列を配列に分割し、配列の最後の文字列項目の値に name を割り当てることによって行われます。

  5. startおよびendクラス名でマークされたアイテムの開始インデックスと終了インデックスを計算します。この場合のインデックスは、親内の要素の 0 ベースの位置を参照します。

  6. 開始インデックスと終了インデックスの間 (両端を含む) の jQuery オブジェクト内の要素のみを jQuery オブジェクトとして返します (これにより、さらに jQuery コマンドを連鎖させることができます)。これは、slice()Array.slice() が配列に対して行うのと同じように、jQuery オブジェクトに対して機能するコマンドを使用します。

于 2009-09-06T13:13:49.540 に答える