Jquery onChange 运行此函数

Question

我创建了一个名为 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 元素。

Answer 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 结构。您的 HTML 中缺少 。假设您的真实代码包含 ，并且假设每行只有一个 .rate，请尝试以下操作：

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}

Answer 2

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

http://jsfiddle.net/JAjFF/

如果您能告诉我们问题是什么，您是否尝试过上面的代码，它是否有效？如果没有的话是什么问题？那我就修改一下我的答案。

Answer 3

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

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

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

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

下一个问题是 closest 方法会爬 DOM 树，直到找到与您传递给它的选择器相匹配的第一个元素。在您的情况下，由于 this 引用 Window 对象，因此 closest 不会找到与您的选择器匹配的祖先。

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

Answer 4

Closest() 可以与 div 一起使用吗？ 是，但它适用于祖先元素

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

如果您的 .rate 元素位于 SELECT 元素内部，则应使用.children()

如果您的 .rate 元素位于 SELECT 元素之外，则应使用 .parent()

如果您的 .rate 元素比 SELECT 元素高出几级以上，则应使用。 close() 来找到最接近的一个。

另外，你的功能很好，你只需要更新你的选择器。