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運行此功能

回答

相關問題