YUI数据表:rowsPerPageChage事件:获取更改时的下拉ID

Question

我转发了之前帖子中的这个问题，因为当我最初问这个问题时，它还不清楚。我不确定自己到底需要什么，这导致我得到的回复不适用。

原始：YUI Datatable-在页面加载后获取DOM元素的ID，并在其他YUI事件中使用它

---

我的问题是：

我有一个YUI数据表。我有一个每页一行的下拉列表。我需要创建一个事件或事件处理程序，或者利用现有的事件处理程序来处理以下内容：

当显示每页行数的下拉列表发生更改时，事件处理程序应该获取该下拉列表的id，并将其传递给另一个函数用作参数。我的数据表有两行PerPageDropDown（又名rppDD）元素。我需要这两个功能。

最好，当页面加载时，它也会这样做，但现在这是额外的信用。

我知道"top"rppDD元素的id目前是"yui-pg0-0-rpp12"，但我的问题源于这样一个事实，即如果我向该页面添加任何代码，该id将更改（为"-rpp13"或类似的内容）。这就打乱了我的其他功能。所以我只想在运行时获取id（无论它是什么）并以这种方式使用它，而不是硬编码。

第二个函数将在下拉菜单更改后立即运行。它将使用下拉列表的id来获取当前选定的值，并将其分配给第三个函数要使用的变量。

---

到目前为止，我所拥有的是：在前面的线程中，有人建议我使用事件rowsPerPageChange。这只在一定程度上有效。在该事件处理程序中放置一个简单的"helloworld"警报可以证明它只在页面加载时发出警报。每当我点击并将下拉菜单更改为其他内容时，它就不再发出警报。

下面是我用来测试的函数和代码：

var getRppValue = function() {
    YAHOO.util.Event.addListener("rowsPerPageChange", getRppValue.prototype.handleOnAvailable()); 
}
var rppDD_ID = "";
getRppValue.prototype.handleOnAvailable = function() {
    alert("hello world");
    alert(this.id); //should alert "yui-pg0-0-rpp12"
    //rppValue = this.id;
}
var rppEvent = new getRppValue();

据我所知，只有在页面最初加载时才会触发/处理此事件。当时，第一个警报如预期的那样提醒"你好世界"。第二个警报显示"未定义"。其目的是，无论rppDD元素的id是什么，第二个警报都应该发出警报（"yui-pg0-0-rpp12"）。

作为参考，我计划将id传递到的函数如下。如上所述，其目的是将[the|one|both]rppDD元素的当前值分配给变量oRPP。然后它调用endDrag（）函数（利用oRPP）：

如果我对id进行硬编码，它将是：

function getRPP_0(){oRPP = g("yui-pg0-0-rpp12").value;endDrag();};

我希望它通过动态：

function getRPP_0(){oRPP = g(rppDD_ID).value;endDrag();};

欢迎提供任何帮助/建议。

Answer 1

正如我们在聊天中看到的，你有这个：

var onRPPChange0 = YAHOO.util.Event.addListener("yui-pg0-0-rpp12", "change", getRPP_0); 
var onRPPChange1 = YAHOO.util.Event.addListener("yui-pg0-1-rpp24", "change", getRPP_1); 
function getRPP_0(){oRPP = g("yui-pg0-0-rpp12").value;endDrag();}; 
function getRPP_1(){oRPP = g("yui-pg0-1-rpp24").value;endDrag();};

您希望能够访问函数中正在更改的元素。

幸运的是，事件处理程序在this对象中提供了事件发生的元素。

所以，这是有效的：

var onRPPChange0 = YAHOO.util.Event.addListener(
    "yui-pg0-0-rpp12", "change", function() {
    // Notice that "this" is the element on which the event was fired
    oRPP = this.value;
    endDrag();
};

通过这种方式，您可以轻松地泛化您的函数，而无需对ID进行硬编码。