mardi 28 mars 2017

How To Combine Multiple "If" Statements Without "Else"?

So I'm having trouble trying to string together multiple if statements together. The reason I need them is to target specific elements within my code so that one doesn't affect the other. For example, right now I have three progress bars acting at once. Which is good! But they all reach 75% . I want it so that the progress bars can be set to different numbers from each other, instead of them both sharing the same effect. If that makes sense. I don't think an else statement works in this case though.

Javascript

$(document).ready(function(){
     var five = '5%';
     var twentyfive = '25%';
     var fifty = '50%';
     var seventyfive = '75%';
     var onehundred = '100%';
     document.getElementById("photoshop").innerHTML = seventyfive;
     document.getElementById("css").innerHTML = fifty;
     document.getElementById("javascript").innerHTML = five;
         setTimeout(function(){
            $(".label").each(function() {
                 if($(this).html()==seventyfive){
                    $(this).click();
                  }
            })
         },1000)
     })

Here's my HTML if that helps any.

<input type="radio" class="radio" name="progress" value="five" id="five" checked>
<label for="five" class="label">5%</label>

<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive">
<label for="twentyfive" class="label">25%</label>

<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50%</label>

<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<label for="seventyfive" class="label">75%</label>

<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100%</label>

  <div class="progress">
    <div class="progress-title"><span>PHOTOSHOP</span></div>
    <div class="progress-bar" id="photoshop" style="color:black;"></div>
    <div class="progress-bar-percent">75%</div>
</div>
   <div class="progress">
    <div class="progress-title"><span>CSS</span></div>
    <div class="progress-bar" id="css" style="color:black;"></div>
    <div class="progress-bar-percent">50%</div>
</div>
   <div class="progress">
    <div class="progress-title"><span>JAVASCRIPT</span></div>
    <div class="progress-bar" id="javascript" style="color:black;"></div>
    <div class="progress-bar-percent">5%</div>
</div>

Aucun commentaire:

Enregistrer un commentaire