Check if div element value is same with object inside a constant - html

Question

This is about body mass index classification and each bmi grade have a suggest diet.
How can I create a function whether the div element is same with constant's object, while the constant have multiple object. If the element inside div is same as specific constant's object, then toggleClass(). I tried to use a if else and is() function but it doesn't work. The example is below:
$(document).ready(function(){
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
if ($(".Classification").is(grade.underweight)){
$(".underweight").toggleClass('show');
} else if ($(".Classification").is(grade.normalweight)){
$(".normalweight").toggleClass('show');
} else if ($(".Classification").is(grade.overweight)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obese)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseI)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseII)){
$(".overweight").toggleClass('show');
} else if ($(".Classification").is(grade.obeseIII)){
$(".overweight").toggleClass('show');
} else {
$(".underweight").toggleClass('hide');
$(".normalweight").toggleClass('hide');
$(".overweight").toggleClass('hide');
}
});
.underweight, .normalweight, .overweight{
display: none;
}
.show{
display: block;
}
.hide{
display: none;
}
<div class="gred">
<span>You are classified as</span>
<span class="Classification">unknown</span>
</div>
<div class="breakfast">
<div class="title"><i class="fas fa-bread-slice"></i> Breakfast</div>
<ul class="underweight">
<li>2 sandwich</li>
<li>Green chutney</li>
<li>1 cup milk</li>
<li>3 cashews</li>
<li>4 almonds</li>
<li>2 walnuts</li>
</ul>
<ul class="normalweight">
<li>1.5c whole grain</li>
<li>1/8 cup walnuts</li>
<li>1 packet Stevia</li>
</ul>
<ul class="overweight">
<li>3 egg whites</li>
<li>1 toasted bread</li>
<li>1/2 low fat milk</li>
</ul>
</div>
<div class="lunch">
<div class="title"><i class="fas fa-pizza-slice"></i> Lunch</div>
<ul class="underweight">
<li>1 cup arhar dal</li>
<li>1 cup potato curry</li>
<li>3 chapatti</li>
<li>1/2 cup rice</li>
<li>1/2 cup low fat curd</li>
</ul>
<ul class="normalweight">
<li>Sunshine salad</li>
</ul>
<ul class="overweight">
<li>1 cup arhar dal</li>
<li>1 chapatti</li>
<li>1/2 low fat curd</li>
<li>salad</li>
</ul>
</div>
<div class="dinner">
<div class="title"><i class="fas fa-fish"></i> Dinner</div>
<ul class="underweight">
<li>1.5 cup chicken curry</li>
<li>3 chapatti</li>
<li>Salad</li>
</ul>
<ul class="normalweight">
<li>Baked buffalo wings</li>
<li>5 stalks celery</li>
<li>2T light bleu cheese dressing</li>
</ul>
<ul class="overweight">
<li>1 cup pumpkin</li>
<li>1 chapatti</li>
<li>Salad</li>
</ul>
</div>

Answer 1

There were a few problems with the code. .is() is not the same as ===. You are doing string comparisons, so you need to be using ===.
Also, the classes were not necessary. jQuery comes with a prebuilt show() and hide() that take care of that for you. Plus, using toggleClass like this can be problematic when all you really want to do is either show it or hide it.
$(document).ready(function() {
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
$(".underweight, .normalweight, .overweight").hide(); // hide everything to start
let c = $(".Classification").text().trim(); // get the text in the .Classification span
if (c !== 'underweight' && c !== 'normalweight') c = 'overweight'; // if its not underweight or normalweight it's considered overweight
c = `.${c}`; // turn it into a className
if ($(c).length > 0) $(c).show() // if the classname exists (like .underweight) show it
});
Example with buttons for testing
In the example below, I added buttons so you could see how the layout changes depending on the classification.
$(document).ready(function() {
const grade = {
"underweight": "underweight",
"healthy": "healthy",
"overweight": "overweight",
"obese": "obesity",
"obeseI": "obese Grade I",
"obeseII": "obese Grade II",
"obeseIII": "obese Grade III"
};
populateMenu();
})
function populateMenu() {
$(".underweight, .normalweight, .overweight").hide(); // hide everything to start
let c = $(".Classification").text().trim(); // get the text in the .Classification span
if (c !== 'underweight' && c !== 'normalweight') c = 'overweight'; // if its not underweight or normalweight it's considered overweight
c = `.${c}`; // turn it into a className
if ($(c).length > 0) $(c).show() // if the classname exists (like .underweight) show it
};
// development function, can be removed
function changeto(v) {
$(".Classification").text(v);
populateMenu()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gred">
<span>You are classified as</span>
<span class="Classification">unknown</span>
</div>
<!-- Development only for testing - can be removed -->
<div>
Change to <button onclick='changeto("underweight")'>underweight</button> <button onclick='changeto("normalweight")'>normalweight</button> <button onclick='changeto("overweight")'>overweight</button>
</div>
<div class="breakfast">
<div class="title"><i class="fas fa-bread-slice"></i> Breakfast</div>
<ul class="underweight">
<li>2 sandwich</li>
<li>Green chutney</li>
<li>1 cup milk</li>
<li>3 cashews</li>
<li>4 almonds</li>
<li>2 walnuts</li>
</ul>
<ul class="normalweight">
<li>1.5c whole grain</li>
<li>1/8 cup walnuts</li>
<li>1 packet Stevia</li>
</ul>
<ul class="overweight">
<li>3 egg whites</li>
<li>1 toasted bread</li>
<li>1/2 low fat milk</li>
</ul>
</div>
<div class="lunch">
<div class="title"><i class="fas fa-pizza-slice"></i> Lunch</div>
<ul class="underweight">
<li>1 cup arhar dal</li>
<li>1 cup potato curry</li>
<li>3 chapatti</li>
<li>1/2 cup rice</li>
<li>1/2 cup low fat curd</li>
</ul>
<ul class="normalweight">
<li>Sunshine salad</li>
</ul>
<ul class="overweight">
<li>1 cup arhar dal</li>
<li>1 chapatti</li>
<li>1/2 low fat curd</li>
<li>salad</li>
</ul>
</div>
<div class="dinner">
<div class="title"><i class="fas fa-fish"></i> Dinner</div>
<ul class="underweight">
<li>1.5 cup chicken curry</li>
<li>3 chapatti</li>
<li>Salad</li>
</ul>
<ul class="normalweight">
<li>Baked buffalo wings</li>
<li>5 stalks celery</li>
<li>2T light bleu cheese dressing</li>
</ul>
<ul class="overweight">
<li>1 cup pumpkin</li>
<li>1 chapatti</li>
<li>Salad</li>
</ul>
</div>

Answer 2

is .Classification a div which has the value representing a grade?
something like this, I presume:
<div class="Classification">underweight</div>
if that is the case, I believe you must access the text content inside of that div, and not only select it as an object.
if ($(".Classification").text().is(grade.underweight)){
$(".underweight").toggleClass('show');
try it with one statement and let's see what happens.