在每個（）內引用$（this）

Question

我試圖用php生成一個表，並將它放在div有「accordian-table」類的地方。但是，當我運行下面的代碼時，生成的html代碼不會替換div。我假設我錯誤地引用了「.accordian-table」，因爲沒有每個語句的修改過的函數都可以工作。

function gettable() { 
    $('.accordian-system').each(function() { 

     var accordianSystem = $(this); 

     var selectedID = accordianSystem.children('.selItems option:selected').val(); 

     $.ajax({ 
      type: "POST", 
      url: 'ajax-gettable.php', 
      data: { ID: selectedID }, 
      success: function(data) { 
       accordianSystem.find('.accordian-table').replaceWith(data); 
      } 
     }); 


    }); 
} 

HTML結構是：

<div class="accordian-systems"> 
    <h3></h3> 
    <div class="accordian-system"> 
     <select class="selItems"></select> 
     <div class="accordian-table"></div> 
    </div> 
</div> 

編輯：我想這是沒有達到成功的功能。與此

var selectedID = accordianSystem.children('.selItems option:selected').val(); 

：但是它確實當我更換此

var selectedID = $('.accordian-system').children('.selItems option:selected').val(); 

，如果移除這個和它的右大括號：

$('.accordian-system').each(function() { 

Answer 1

本聲明將無法正常工作：

accordianSystem.children('.selItems option:selected').val() 

這只是要m atch直接的孩子，滿足這個選擇，但option:selected從來不是一個直接的孩子（這是一個孩子的孩子），所以它不會匹配任何東西。我想你也許想要這個：

accordianSystem.find('.selItems option:selected').val() 

如果你能多一種元素都有，你將不得不進一步修改這個代碼，因爲它可以返回值的數組，而不僅僅是一個單一的價值。

---

此外，路易斯的建議是健全的。不要假設你的代碼在做什麼。設置斷點，逐步瀏覽它，看看它實際上在做什麼。如果它沒有擊中你的success處理程序，那麼創建一個error處理程序，並查看它的參數以瞭解它失敗的原因。您的代碼當前編寫的方式，您可能會通過null作爲selectedID，直到您執行上面的建議更改。

Answer 2

以下是在JSFiddle

HTML一個工作示例：

<div class="accordian-systems"> 
    <h3>Accordian Systems</h3> 

    <div class="accordian-system"> 
     <select class="selItems"> 
      <option selected='selected'>1</option> 
      <option>2</option> 
     </select> 
     <div class="accordian-table"></div> 
    </div> 
    <div class="accordian-system"> 
     <select class="selItems"> 
      <option selected='selected'>3</option> 
      <option>4</option> 
     </select> 
     <div class="accordian-table"></div> 
    </div> 
</div> 

JS：

var accordianSystems = $('div.accordian-system'); 
accordianSystems.each(function (index, element) { 
    var selectedItemText = $(element).find('.selItems option:selected').text(); 
    setTable(element, selectedItemText); 
}); 
accordianSystems.find('.selItems').change(function() { 
    setTable($(this).parent(), $(this).val()); 
}); 

function setTable(accordianSystem, id) { 
    $(accordianSystem).children('div.accordian-table').text('Selected value: ' + id); 
    //Here you would otherwise call your ajax function... 
} 

Answer 3

當的select元件的值改變時，一個AJAX請求是用的值作出10個元素。來自ajax請求的響應用.accordian-table類替換div。 如果您再次更改選擇的值，該怎麼辦？沒有可以替換的div！我會提供一個解決方案，應該在第一次和隨後的時間內工作。

$(function() { 
    $('div.accordian-system').children('select.selItems').on('change', gettable); 
}); 

function gettable() { 
    var accordianSystem = $(this).parent(); 
    var selectedID = this.value; 
    $.ajax({ 
     type: "POST", 
     url: 'ajax-gettable.php', 
     data: { ID: selectedID }, 
     success: function(data) { 
      var repElem = accordianSystem.children('.accordian-table') || $(this).next(); 
      repElem.replaceWith(data); 
     } 
    }); 
} 

This Demo簡單地表明當的select元件的值改變時，一個AJAX請求。您可以檢查網絡選項卡中的調試工具，你應該看到這樣的事情：

Remote Address:162.243.204.190:80 
Request URL:http://fiddle.jshell.net/fiddleyetu/wKA2g/show/ajax-gettable.php 
Request Method:POST 
Status Code:404 NOT FOUND 
Chrome/35.0.1916.153 Safari/537.36 
X-Requested-With:XMLHttpRequest 
Form Dataview sourceview URL encoded 
ID:50