我如何才能更有效地重写

Question

I have to believe that there's a better way to write the below code. Thanks in advance.

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

Perhaps giving the HTML elements a class will work?

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

Answer 2

The best solution is to have the default condition of the page specified in HTML/CSS, so it displays properly at first and you don't have to run a bunch of javascript just to set up the default condition.

So, if what you're trying to do is establish the default condition upon page load, change the display style of all these elements to style="display: none;" right in the HTML so they start out with the right state.

Or better yet, give them all a common class name and create a CSS style rule so they are all initially hidden. Doing this in the markup/CSS will prevent them showing and then hiding as your script runs - they will just start out with the right state.

CSS:

.initialHidden {
     display: none;
}

HTML:

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

Answer 3

add common class to element the hide it by this way

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

OR

Put all elements in Single div wrap and hide it by that id

Answer 4

I would do this :

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

Answer 5

为什么不将标签包裹在字段集中并隐藏字段