0

我创建了一个名为 billingOptions() 的函数，它与下拉（选择）元素相关联。当用户在下拉列表中选择一个选项时，该函数将运行。

下拉菜单将通过页面动态添加...每次添加 billingOptions() 函数 onChange。我正在尝试使用 Jquery 从已更改的下拉列表中找到最接近的 class=rate 实例。请记住，下拉菜单是动态添加的，因此可能有很多 .rate ...

我曾尝试使用“this”和“closest”来查找最近的类（我什至不确定您是否可以使用具有最接近功能的类）。这是一些代码：

***我被要求提供 HTML 的确切结构（表格的行是动态生成的。表格是静态的）。

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)">
<option class="fixedRate">Bill Fixed Rate</option>
<option class="hourly">Bill Hourly</option>
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fieldWidth100 rate"/> 
</tr> 
</table>

function billingOptions(){
 $(this).closest('.rate').hide();
}

***编辑：此代码不起作用。目标是隐藏 input.rate 元素。

4

4 回答 4

1

编辑：this首先，您对未传递给函数的担忧有一半是正确的。它正在通过，但没有被使用。给你的函数一个命名参数，并引用它而不是this：

function billingOptions(el)
{
    $(el).something()...
}

.rate总是下一个元素吗？如果是这样的话：

$(el).next(".rate").hide();

永远.rate是兄弟姐妹？永远只有一个.rate兄弟姐妹吗？如果是这样的话：

$(el).siblings(".rate").hide();

将.rate与您的选择共享一个共同的父母，并成为该共同父母中的唯一实例.rate？如果是这样的话：

$(el).closest(".commonParentClassName").find(".rate").hide();

如果这些都不适合您，请提供有关 HTML 结构的更多详细信息。

编辑： 感谢您发布 HTML 的结构。<td>您的 HTML中缺少您的内容。假设您的真实代码包含<td>，并假设每行只有一个.rate，试试这个：

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}
于 2011-08-07T22:35:20.103 回答
0

你并没有真正问过一个问题，除了与班级最接近的工作之外，我设置了这个小提琴来向你展示它确实：

http://jsfiddle.net/JAjFF/

如果您能告诉我们问题是什么，您是否尝试过上面的代码，它有效吗？如果不是，有什么问题？然后我会修改我的答案。

于 2011-08-07T22:27:55.477 回答
0

很难确切地知道您的代码正在尝试做什么，但它存在一些问题。

首先，您将一个 DOM 元素传递给您的函数，但您的函数没有声明参数，并且您没有访问您传入的参数。此外，this在此上下文中指的是 Window 对象，而不是您想要的元素. 将其更改为此（传入命名参数并使用该参数代替this）将解决该问题：

function billingOptions(elem){
   $(elem).closest('.rate').hide();
}

您也可以使用arguments集合而不是使用命名参数，但我建议使用上述方法。

下一个问题是该closest方法爬上 DOM 树，直到找到与您传递给它的选择器匹配的第一个元素。在您的情况下，正如thisWindow 对象所指的那样，closest不会找到与您的选择器匹配的祖先。

上面显示的函数也不太可能解决该问题，因为从代码的外观来看，.rate它不是所选元素的祖先。我真的需要更多关于您的 HTML 结构的信息，以帮助您选择正确的元素（例如，在与 相同的容器内.rate总是会有一个元素吗？如果是这种情况，这里有一个工作示例）。.rateselect

于 2011-08-07T22:35:43.173 回答
0

最接近（）是否与 div 一起使用？是的，但它适用于祖先元素

如果您的 .rate 元素与您的 SELECT 元素处于同一级别，则应使用 .siblings()

如果你的 .rate 元素在你的 SELECT 元素中，你应该使用 .children()

如果您的 .rate 元素就在您的 SELECT 元素之外，您应该使用 .parent()

If your .rate element is more then a few levels above your SELECT element, you should then use. closest() to find the closest one.

Also, your function is fine, you just need to update your selector.

于 2011-08-07T23:09:12.593 回答