Jquery onChange运行此功能

我创建了一个名为billingOptions（）的函数，它与下拉（select）元素相关联。当用户在下拉菜单中选择一个选项时，该功能就会运行。Jquery onChange运行此功能

下拉将动态地通过页面添加...每次添加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元素。

来源

2011-08-07 m_gunns

这看起来很好，你面临什么问题？ – Mrchief

这样做的效果是否正确？ http://jsfiddle.net/vzfyz/ –

没有任何反应。我编辑了代码以显示.rate类的输入。 –

编辑：首先，你是半正确的关于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中缺少<td>。假设你真正的代码包括<td>，并假设只有一个.rate每行，试试这个：

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

来源

2011-08-07 22:35:20 gilly3

这些都没有工作。这里是生成的HTML：（表格的行是动态生成的。该表是静态的）。

<选择类= “billOptions” 平变化= “billingOptions（这）”> <输入的ID = “fixedRate1” 类= “fieldWidth100率” 类型= “文本” 占位符= “费率” 名称= “固定利率”>

–

@mitch - 我更新了我的答案，这些答案可能会解决您的问题。请参阅我答案顶部的添加段落。 – gilly3

@mitch - 我发布了一个解决方案，使用您的HTML并正确引用传递给函数的参数。在底部查看我的编辑。 – gilly3

你还没有真正问了一个问题，除了确实最接近的工作带班，我成立了这个琴告诉你，它的作用：

http://jsfiddle.net/JAjFF/

如果你能告诉我们什么是这个问题，你有没有尝试过上面的代码，它工作？如果不是，问题是什么？然后我会修改我的答案。

来源

2011-08-07 22:27:55

不，抱歉......它不起作用。我已经在我的原始问题中添加了更多细节。对于那个很抱歉。 –

我认为这是问题，但是我对祖先有什么用？ - 最接近从所选元素开始向上遍历DOM树。如果您正在查找的元素不是所选元素的祖先，那么最接近的元素将找不到它。 –

这是很难确切地知道你的代码是试图做的，但也有几个与它的问题。

首先，你传递一个DOM元素到你的函数中，但是你的函数没有声明参数，并且你没有访问你传入的参数。另外，在这个上下文中的this是指Window对象，而不是你想要它的元素。它改变这种（传递一个命名参数和使用代替this）将解决：

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

你可以选择使用，而不是使用一个命名参数的arguments集合，但我会建议上述方法在那之上。

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

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

来源

2011-08-07 22:35:43

为什么downvote？ –

'this'不是由参数的存在与否决定的。如果函数以这种方式使用，它将工作：$（“。billOptions”）。change（billingOptions）'。 jQuery没有要求事件处理程序是匿名函数。 – gilly3

我知道这不是......这就是为什么在我的例子中，我已经将'this'改为其他变量名。在问题中发布的函数中，'this'引用Window对象。 –

Does closest（）使用div吗？ YES，但它的祖先元素

如果您.rate元素是在同一水平作为你的SELECT元素，如果你的.rate元素是你的SELECT元素在里面你应该使用.siblings（）

，你应该使用。孩子（）

如果您.rate元素是你的SELECT元素的外面，如果你的.rate元素更多的则是你的SELECT元素之上的几级你应该使用.parent（）

，那么你应该使用。最近（）找到最近的一个。

此外，你的功能没问题，你只需要更新你的选择器。

来源

2011-08-07 23:09:12 rkw

Jquery onChange运行此功能

回答

相关问题