jQuery鏈式函數和「this」：在這個例子中，我的語法不正確？

Question

這裏的情況：

我有3個button小號

<button type="button" class="job-update-button wp-core-ui button-primary" id="delete-btn">Remove</button> 
<button type="button" class="job-update-button wp-core-ui button-primary" id="update-btn">Update</button> 
<button type="button" class="job-update-button wp-core-ui button-primary" id="add-btn">Add</button> 

和input

<input type="hidden" name="jobAction" value="" /> 

其value應該涉及id取其button已被點擊。它可能看起來很傻，但這是我整合頁面上的邏輯的方式，以便服務器上的單個腳本可以處理一系列相關的AJAX請求。

• delete-btn點擊 - >jobAction得到valuedelete的
• update-btn點擊 - >jobAction得到的update
• add-btnvalue點擊 - >jobAction得到的add

功能value我正在使用click個事件始於

jQuery('.job-update-button').click(function(){ 
    // change the value of the memberAction hidden input based on which member-update-button was clicked 
    jQuery('input[name="jobAction]"').val(jQuery(this).attr('id').substring(0, this.IndexOf('-'))); 

，我試圖找出爲什麼我得到

this.IndexOf不是一個函數。

我的想法是，通過我打電話的時候this.IndexOf('-')的this指對象調用substring，這是jQuery(this).attr('id')返回的字符串。

這是錯的嗎？如果是這樣，你能幫我理解爲什麼嗎？是否有一個更有效率和緊湊的方式來執行整個過程？

Answer 1

你的jQuery函數是搞砸了所有你需要的是：

$('.job-update-button').click(function(){ 
// change the value of the memberAction hidden input based on which member-update-button was clicked 
    var id = $(this).attr('id'); 
    var value = id.replace("-", " "); 

    $('input[name="jobAction"]').val(value); 

}) 

對於你不需要調用jQuery的速記方式首發簡直是$ 它看起來就像你有一個「失控的地方在你的代碼中。更改此：

'input[name="jobAction]"' 

要：

'input[name="jobAction"]' 

Working codepen example

請注意，而不是：

jQuery('.job-update-button').click(function(){} 

我用：

你可以調用jQuery的每次但$更容易。

如果它不是你要找的只是讓我知道，我會修改或刪除。

Answer 2

讓我們打破你的代碼了一點，以使其更清晰：

jQuery('.job-update-button').click(function(){ 

    var value = jQuery(this).attr('id').substring(0, this.IndexOf('-')); 

    jQuery('input[name="jobAction"]').val(value); 

}); 

裏面的單擊事件處理程序，this指觸發它的HTML元素。這只是jQuery內部工作的方式（當calling or applying函數時，您可以明確地設置this或'範圍'）。

這意味着您正試圖在HTML元素上調用indexOf（注意正確的拼寫），該元素沒有indexOf方法。

另外請注意，大多數人使用的$速記jQuery的方法。

要解決你的代碼，這可能就夠了：

$('.job-update-button').click(function(){ 

    $('input[name="jobAction"]').val($(this).attr('id').replace(/-btn$/, '')); 

}); 

這裏，爲了剔除標識的附加「-btn」部分我用replace方法與Regular Expression。