Ajax：如何將變量函數傳遞給另一個jQuery

Question

我一直在嘗試使用變量作爲選擇器，但它僅限於一個函數，如何將該變量值傳遞給其他函數。我是新來的Ajax，請幫我解決這個問題。

我試過本地存儲，但那也不起作用。

這裏是我的HTML代碼：

<td class="info-group jname"> 
    <p class="pro-info-right text-per jname"><?php echo $jsdata['js_fname']; ?></p> 
    <div class="edit jname" style="display:none"> 
     <input class="editbox jname" name="js_fname_edit" value=""> 
    </div> 
    <?php if($this->user_valid == TRUE) { ?> 
    <a href="#"><span title="Edit" class="edit-icon jname ctrl glyphicon glyphicon-pencil"></span></a> 
    <a href="#"><span title="Delete" class="del-icon ctrl glyphicon glyphicon-remove-sign"></span></a> 
    <?php } ?> 
</td> 

<td class="info-group jaddr"> 
    <p class="pro-info-right text-per jaddr"><?php echo $jsdata['js_address']; ?></p> 
    <div class="edit jaddr" style="display:none"> 
     <input class="editbox jaddr" name="js_fname_edit" value=""> 
    </div> 
    <?php if($this->user_valid == TRUE) { ?> 
    <a href="#"><span title="Edit" class="edit-icon jaddr glyphicon glyphicon-pencil"></span></a> 
    <a href="#"><span title="Delete" class="jaddr del-icon glyphicon glyphicon-remove-sign"></span></a> 
    <?php } ?> 
</td> 

的JavaScript：

$(document).ready(function(){ 
    var slctd; 
    $('.info-group').click(function(e) { 
     e.preventDefault(); 
     slctd = ($(this).attr('class').split(' ')[1]); 
     $('.'+ slctd +' .text-per').hide(); 
     $('.'+ slctd +' .ctrl').hide(); 
     var data = $('.'+ slctd +' .text-per').html(); 
     $('.'+ slctd +' .edit').show(); 
     $('.'+ slctd +' .editbox').val(data); 
     $('.'+ slctd +' .editbox').focus();//comming up to here 
    }); 
    $('.'+ slctd +' .editbox').mouseup(function(e) { 
     e.preventDefault();//not comming here 
     return false; 
    }); 
    $('.'+ slctd +' .editbox').change(function(e) { 
     alert(slctd);//not comming here 
     e.preventDefault(); 
     $('.'+ slctd +' .edit').hide(); 
     var js_address = $('.'+ slctd +' .editbox').val(); 
     var dataString = 'js_address='+ js_address; 
     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>"+'_'+ slctd +'', 
      data: dataString, 
      cache: false, 
      success: function(html) { 
       $('.'+ slctd +' .text-per').html(js_address); 
       $('.'+ slctd +' .text-per').show(); 
      } 
     }); 
    }); 
    $(document).mouseup(function(e) { 
     e.preventDefault();//not comming here 
     $('.'+ slctd +' .edit').hide(); 
     $('.'+ slctd +' .text-per').show(); 
     $('.'+ slctd +' .ctrl').show(); 
    }); 
}); 

Answer 1

這是寫在其它風格相同的代碼。這是更高效和更好的代碼。

基本上slctd只不過是.info-group元素，您可以使用上下文選擇器通過傳遞選擇器來選擇點擊td中的元素。

$(document).ready(function() { 
    // When clicked on the element having class info-group 
    $('.info-group').on('click', function (e) { 
     e.preventDefault(); 
     var $this = $(this); // Cache the context for performance 

     $this.find('.text-per, .ctrl').hide(); // Hide the elements inside the clicked td matching the classes 
     var data = $('.text-per', this).html(); // This is context selector, passing this here will search for .text-per element inside the this i.e. td element 
     $('.edit', this).show(); 
     $('.editbox', this).val(data).focus(); // You can chain methods here 
    }).on('mouseup', '.editbox', function (e) { 
     // when mouseup of .editbox inside the .info-group 
     return false; // preventDefault is not needed when using return false 
    }).on('change', '.editbox', function (e) { 
     var parentTd = $(this).closest('.info-group'); // Get the parent <td> object, so that this can be used as context for selecting the elements inside it 

     $('.edit', parentTd).hide(); // Hide .edit element inside the td 
     var value = $('.editbox', parentTd).val(); 
     var dataString = $('.editbox', parentTd).attr('name') + '=' + value; // Create data-string as Name=Value format 

     // Send AJAX request using appropriate data 
     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>" + '_' + parentTd + '', 
      data: dataString, 
      cache: false, 
      success: function (html) { 
       $('.text-per', parentTd).html(value).show(); // Update html after successful completion of ajax 
      } 
     }); 
    }); 

    $(document).mouseup(function (e) { 
     e.preventDefault(); 
     $('.edit').hide(); 
     $('.text-per').show(); 
     $('.ctrl').show(); 
    }); 
}); 

Answer 2

如果slctd才明確$('.info-group').click，那麼你必須把所有的代碼依賴於slctd點擊功能裏面。

$('.info-group').click(function(e) { 
    e.preventDefault(); 

    // this is the ONLY place that slctd is being defined at. 
    slctd = ($(this).attr('class').split(' ')[1]); 

    $('.'+ slctd +' .text-per').hide(); 
    $('.'+ slctd +' .ctrl').hide(); 
    var data = $('.'+ slctd +' .text-per').html(); 
    $('.'+ slctd +' .edit').show(); 
    $('.'+ slctd +' .editbox').val(data); 
    $('.'+ slctd +' .editbox').focus();//comming up to here 

    // PUT ALL OTHER CODE THAT USES slctd HERE 
}); 

由於其他用戶詢問過。請注意這種技術，因爲每次單擊.info-group時，它只會將事件綁定到slctd元素。

你可能想看看不同的技術或者是取消綁定先前的事件：

var current_slctd; 

$('.info-group').click(function(e) { 
    e.preventDefault(); 

    // code below will be about binding to new slctd 

    // this is the ONLY place that slctd is being defined at. 
    var slctd = ($(this).attr('class').split(' ')[1]); 

    if (current_slctd == slctd) { 
     // return since this value of slctd has already been done 
     return; 
    } else { 
     // UNBIND events on current_slctd 
    } 

    // start over and bind new events 
    current_slctd = slctd; 

    $('.'+ slctd +' .text-per').hide(); 
    $('.'+ slctd +' .ctrl').hide(); 
    var data = $('.'+ slctd +' .text-per').html(); 
    $('.'+ slctd +' .edit').show(); 
    $('.'+ slctd +' .editbox').val(data); 
    $('.'+ slctd +' .editbox').focus();//comming up to here 

    // PUT ALL OTHER CODE THAT USES slctd HERE 
});