表格單元格文字沒有更新文字內容

Question

我有一個基本的停車計算器。它通過在包裹上使用計算所需的空間。

我想根據用途更新「單位」。例如，咖啡店單位是杯子而辦公室空間是平方英尺。 - 愚蠢的例子。

這似乎只適用於第一行，然後每行都卡在這個單位。

另外，如果你沒有從第一行開始單位不顯示。

基本上，當使用改變時，我找到該行中的類與td。然後更新適當的單元格。讓我知道你是否需要更多的代碼。

$(".useType").change(function() { 

    var use = $('.useType').val(); 
    var units = $(this).closest('tr').find('.units'); 
    units.addClass('highlight'); 

    if (use == "General Office 25000sf") { 
    units.text('sf'); 


    } else if (use == "General Retail") { 
    units.text('aisles'); 


    } else if (use == "Fitness Studio") { 
    units.text('weights'); 


    } else if (use == "Coffee Shop") { 
    units.text('cups'); 


    } else if (use == "Restaurant (no bar)") { 
    units.text('plates'); 


    } 


}); 

我已經提出了一個小提琴的例子，下面的鏈接，你可以看到這個。要進行測試，請爲第一個表格行選擇一個用途。然後設置下一個。單位將匹配。然後將第一行更改爲不同的內容。然後所有的單位都會在更改時匹配。

fiddle

Answer 1

此選擇：

var use = $('.useType').val(); 

與該類選擇的第一個實例。正確的範圍是這樣的：

let $this = $(this); 
let use = $this.val(); 
let units = $this.closest('tr').find('.units'); 

這裏的a working fiddle：

var use = $(this).val(); 

作爲一個側面說明，它，因爲你使用它不止一次將是更好的緩存$(this)。

最後，如果您只是簡單地將您的值存儲在各種查找中，那麼您的代碼可以大大簡化（並且更具可讀性）。這還允許您在不添加其他邏輯的情況下更改/刪除任何值。

$(".useType").change(function() { 
    let $this = $(this); 
    let lookup = { 
    "General Office 25000sf": "sf", 
    "General Retail": "aisles", 
    "Fitness Studio": "weights", 
    "Coffee Shop": "cups", 
    "Restaurant (no bar)": "plates" 
    }; 

    $this.closest('tr') 
    .find('.units') 
    .text(lookup[$this.val()]) 
    .addClass('highlight'); 
}); 

這是a working fiddle。