5

我想让用户单击一个起点，然后单击一个终点，并能够在选定的两个点之间操作各种表单元素。

该页面是一个包含许多行的表格，每行包含相关信息以操作/保存该行中问题的答案。每行都有一个隐藏的值输入，以及是/否单选按钮，主要用于非熟练用户。带有问题的 TD 单元格允许用户单击或在是、否、空之间切换。所以基本上我在页面上留下了单选按钮以显示是/否并使用隐藏字段来存储 (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);
    });

现在我想允许用户单击一个起点并让该答案将以下所有问题填充到他们单击第二个项目的任何位置。可能是 10 个问题，或者 20 个问题，它是一个未知变量。可能有一页上有130个问题，连续20个问​​题可能是“是”。如上所述，每一行都有一个“问题”单元格，之前的单元格是项目单元格。

我知道如何根据绑定到下面列出的 click/dblclick 事件的 jquery 选择器/函数来设置起始元素和结束元素。

我不确定的是如何遍历 dom 或选择我需要在页面上两个选定点之间操作的所有元素。

    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”的元素集合，当您找到起始元素时，您可以开始执行您描述的处理。既然你有“这个”，你可以拿那个 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

听起来最简单的方法是将开始类添加到开始元素，将结束类添加到结束元素。然后在开始和结束之间遍历元素时，您可以检查开始或结束类名称并执行/阻止适当的操作。

编辑：

像这个插件这样的东西会做到这一点。该插件假定定义范围边界的两个元素具有相同的父元素并且具有相同的元素类型 ( 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')parent 是父元素的位置（如果您有其他文本输入，则传入 input:text 本身将无法正常工作父元素之外的页面，因为插件依赖于索引）。

  2. 如果需要，您可以将具有不同开始和结束类名称的选项对象传递给 rangeSelector（例如.rangeSelector({ start: "myStartClass", end: "myEndClass"})，或者简单地使用默认值start，end在这种情况下，您不需要传递任何对象。

  3. settings 变量将默认值（定义为对象的属性）与传入的选项对象的属性（如果未定义选项对象，则为没有属性的对象）合并。

  4. 计算我们在 jQuery 对象中处理的元素的类型并存储在name变量中。这是通过将nodeNamejQuery 对象中第一个元素的字符串拆分为一个数组并将 name 分配给数组中最后一个字符串项的值来完成的。

  5. 计算标有start和end类名称的项目的开始和结束索引。在这种情况下，索引是指元素在其父元素中从 0 开始的位置。

  6. 仅将 jQuery 对象中开始和结束索引（包括）之间的那些元素作为 jQuery 对象返回（以便可以链接进一步的 jQuery 命令）。这使用slice()命令，它在 jQuery 对象上的作用与 Array.slice() 在数组上的作用相同。

于 2009-09-06T13:13:49.540 回答
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 回答