使用jquery.closest挑出頁面元素時遇到的麻煩

Question

'Kay對可能會成爲一個簡單問題以及我的hacky代碼表示歉意：P但是我一直在絞盡腦汁，幾個小時查看文檔，我圍繞着圈子，我的代碼基本上是功能性的，但我沒有從rec-outlay標籤中選擇文本值，我無法弄清楚爲什麼。

繼承人是例如我的HTML：

<div class='item'> 
<p class='issue-title'><strong>Lorem Ipsum</strong></p> 
<a class='del-issue' href='#' onclick='document.delIssForm.delIss.value=59;'>Delete</a> 

<div class='issue-fix'> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat.</p> 

    <p class='rec-outlay'>40.0</p> 
</div> 
</div> 

<div class='item'> 
<p class='issue-title'><strong>Lorem Ipsum</strong></p> 
<a class='del-issue' href='#' onclick='document.delIssForm.delIss.value=59;'>Delete</a> 

<div class='issue-fix'> 
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat.</p> 

    <p class='rec-outlay'>40.0</p> 
</div> 
</div> 

當刪除鏈接被點擊的jQuery打完一個確認對話框，這是所有的功能齊全，除了從那裏我試圖減去另一個值位，請問有人能指點我嗎？！

$(document).ready(function(){ 

$('.del-issue').click(function(){ 

    var elem = $(this).closest('.item'); 
    var clicked = {id: $(this).val()}; 
    // var total = $('input[id=CostToSolve]').val(); 

    $.confirm({ 
     'title'  : 'Delete Confirmation', 
     'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?', 
     'buttons' : { 
      'Yes' : { 
       'class' : 'blue', 
       'action': function(){ 
        /* elem.slideUp(); 
        var dataString = 'delIss=' + document.delIssForm.delIss.value; 
        $.ajax({ 
        type: "POST", 
        url: "delIssue.php", 
        data: dataString 
        }); */ 

        // entry is to be deleted catch the value in the outlay box 
        var total = $("#CostToSolve").val(); 

        // HELP!!!!! 
        $(this).closest('.item-fix').find('.rec-outlay').text(); 
         total -= (parseInt($(this).text(), 10) || 0); 


        // Then update the value in the input 
        $('#CostToSolve').val(total + ".00"); 

        // Prevent script from doing anything further 
        return false; 
       } 
      }, 
      'No' : { 
       'class' : 'gray', 
       'action': function(){} // Nothing to do in this case. You can as well omit the action property. 
      } 
     } 
    }); 

}); 

}); 

Answer 1

噢，我知道了！

我用「ELEM」

var elem = $(this).closest('.item'); 

的預先存在的定義，然後發現這樣的文本值，現在我的腳本的作品完美:)

// Modify it 
$(elem).find('.rec-outlay').each(function(i, ele) { 
    total -= parseInt($(ele).text(),10) || 0; 
}); 

Answer 2

你是'action': function()範圍內嘗試使用$(this).closest的時候，在這種情況下，是不是與上述相同的this。

this總是綁定到您的代碼在運行最深的函數

嘗試將原來的元素保存在一個更全局上下的變量，將範圍縮小到下一個功能，像這樣：

$('.del-issue').click(function(){ 
    var that = this; 
    var elem = $(this).closest('.item'); 

    ... 
    'action': function(){ 
      $(that).closest... 
      ... 
    } 
    ... 

在這種情況下that將參考del-issue。這是通過功能鏈保留this變量的常見做法。