我如何才能更有效地重寫

Question

我必須相信，有一種更好的方法可以編寫以下代碼。 提前致謝。

var hProtein = $('#protein-lbl');
var hCarb = $('#carb-lbl');
var hFat = $('#fat-lbl');
var hTotal = $('#totalCalories');

// Normal Calc vars
var nProtein = $('#protein-normal-lbl');
var nCarb = $('#carb-normal-lbl');
var nFat = $('#fat-normal-lbl');
var nTotal = $('#totalCalories-normal');

// Hide calculations until bodyweight is entered
hProtein.hide();
hCarb.hide();
hFat.hide();
hTotal.hide();
nProtein.hide();
nCarb.hide();
nFat.hide();
nTotal.hide();

Answer 1

也許給HTML元素一個類可以工作？

var $ele = $('.class-name');
$ele.hide();

Answer 2

最好的解決方案是在HTML / CSS中指定頁面的默認條件，因此它一開始會正確顯示，您不必運行一堆JavaScript即可設置默認條件。

因此，如果您要嘗試在頁面加載時建立默認條件，請將所有這些元素的顯示樣式更改為style="display: none;" 在HTML中正確顯示，因此它們以正確的狀態開始。

或者更好的辦法是，給它們一個通用的類名，並創建一個CSS樣式規則，使它們最初都被隱藏。 在標記/ CSS中執行此操作將阻止它們在您的腳本運行時顯示然后隱藏-它們只會以正確的狀態開始。

CSS：

.initialHidden {
     display: none;
}

HTML：

<div id="totalCalories-normal" class="initialHidden"></div>

Answer 3

將通用類添加到元素中以這種方式將其隱藏

$('.common-class-name').hide()

要么

將所有元素放在Single div環繞中，並通過該ID隱藏

Answer 4

我會這樣做：

$([
    '#protein-lbl',
    '#carb-lbl',
    '#fat-lbl',
    '#totalCalories',
    '#protein-normal-lbl',
    '#carb-normal-lbl',
    '#fat-normal-lbl',
    '#totalCalories-normal'
].join()).hide();

Answer 5

為什么不將標簽包裹在字段集中並隱藏字段