テーブルセルテキストがテキストコンテンツを更新しない

Question

私は基本的な駐車用電卓を持っています。それは、パーセル上での使用によって必要なスペースを計算する。

「ユニット」を使用に基づいて更新したいと考えています。たとえば、コーヒーショップのユニットはカップで、オフィスのスペースはsf（平方フィート）です。 - 愚かな例。

これは最初の行でのみ動作しているように見えますが、各行はこのユニットでスタックされています。

また、最初の行で開始しないと、ユニットは表示されません。

使用が変更されたとき、私はその行のクラスで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(); 

は、そのクラスで最初のインスタンスを選択しています。このように適切にスコープを：あなたはそれを複数回使用しているので、サイドノートとして

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

、$(this)をキャッシュする方が良いでしょう：

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

はここa working fiddleです。

最後に、並べ替えの参照に値を格納するだけで、コードを大幅に簡素化（読みやすく）することができます。これにより、ロジックを追加せずに値を変更/削除することもできます。

$(".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です。