無法移除窗體控件中的類並添加新的類引導

Question

我有兩個td的選擇國家選項和另一個輸入文本的表。

<tr> 
     <td><select name="country" class='form-control country' id="country"> 
     <option value="">-select country-</option> 
     <option value="usa">USA</option> 
     <option value="eng">England</option> 
     <option value="nzl">New Zealand</option> 
     </select></td> 
     <td><input type="text" class='form-control country_name'></td> 
    </tr> 
    <p id="ppl"></p> 

這裏是小提琴https://jsfiddle.net/jvk3/wbzasubL/1/

根據國家改變我需要刪除文本類，並添加新的類。 例如，我已將國家更改爲美國我需要刪除country_name的文本類與usa_country，如果他將國家更改爲eng我需要刪除country_name to eng_country

這是我的jQuery代碼。

$(".country").on('change', function(){ 
    var cty_name = $(this).val(); 
    $(this).next('td.country_name').removeClass('coutry_name') 
    .addClass(çty_name+'_counrty') 
    }) 

我嘗試了很多方法，但我沒有成功。 感謝您的幫助

Answer 1

this referes到.country這是不.country_name元素的兄弟（你的選擇也是錯誤的），因此.next()不會有任何效果。

您可以使用.closest()向上遍歷祖先TD元素，然後用.next()目標緊跟兄弟TD，事後用.find()目標INPUT元素。

$(this).closest('td').next('td').find('input').removeClass('coutry_name').addClass(çty_name+'_counrty'); 

OR，

如果你有一個輸入，travese高達TR，然後用.find()

$(this).closest('tr').find('input').removeClass('coutry_name').addClass(çty_name+'_counrty');