Jquery legen Sie den Anfangswert

Question

Hoffe, Sie können mir helfen. Wie setze ich den Anfangswert eines Elements in Jquery/Javascript?

Um mein Problem zu erklären, habe ich das folgende Snippet. Mein Snippet funktioniert wie ich will, aber nur nach "onclick". Wenn ich die Seite lade, wird nicht der richtige Wert angezeigt. In diesem Fall möchte ich, wenn ich auf "Monatlich anzeigen" klicke, 80 € erscheinen und wenn ich auf "Jahrestyp" klicke, erscheinen 800 €. Aber es funktioniert nur, nachdem ich geklickt habe, nicht wenn ich die Seite lade.

Dank

//Trying to set the initial value 
 
$(document).ready(function() { 
 
    $(".teste").ready(function() { 
 
     var initialVal = $(this).html(); 
 
if(initialVal !== "Show Monthly"){ 
 
    jQuery(".amountMonth").hide(); 
 
    jQuery(".amountAnnual").show(); 
 
}else{ 
 
    jQuery(".amountMonth").show(); 
 
    jQuery(".amountAnnual").hide(); 
 
}  
 
    }); 
 
}); 
 

 

 
//OnClick is working right 
 
$(document).ready(function() { 
 
    $(".teste").click(function(e) { 
 
     e.preventDefault(); 
 
     var initialVal = $(this).html(); 
 
     if(initialVal !== "Show Monthly"){ 
 
      $(".showAnnualMonthly a").text("Show Monthly"); 
 
      $(".perYearMonth").text("per year"); 
 
      jQuery(".monthlyOptions").hide(); 
 
      $("#arrowUpDown").removeClass("icon-up-arrow-button"); 
 
      $("#arrowUpDown").addClass("icon-down-arrow-button"); 
 
      jQuery(".amountMonth").hide(); 
 
      jQuery(".amountAnnual").show(); 
 
     } 
 
     else if (initialVal !== "Show Annual"){ 
 
      $(".showAnnualMonthly a").text("Show Annual"); 
 
      $(".perYearMonth").text("per month"); 
 
      jQuery(".monthlyOptions").show(); 
 
      $("#arrowUpDown").removeClass("icon-down-arrow-button"); 
 
      $("#arrowUpDown").addClass("icon-up-arrow-button"); 
 
      jQuery(".amountMonth").show(); 
 
      jQuery(".amountAnnual").hide(); 
 
     } 
 
    }); 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="amount amountAnnual" style="display:none">Annual --> 600€</p> 
 
<p class="amount amountMonth" style="dispay:none">Monthly--> 60€</p> 
 

 
<p class="showAnnualMonthly" id="showMonthlyOpt"> 
 
    <a href="" style="border:0; text-decoration:none;" class="teste">Show Monthly 
 
    <div class="row"> 
 
     <span id="arrowUpDown" class="icon-down-arrow-button changeArrow" style="color: rgba(0, 161, 204, 1); margin-bottom:30px; font-size:36px;"></span> 
 
    </div> 
 
    </a> 
 
</p>

Answer 1

einfach den Code ausführen, der die p Elemente innerhalb $(document).ready() aber außerhalb des Click-Handler zeigt und versteckt. Es gibt keine Notwendigkeit für die erste $(document).ready() Funktion; Sie können sie zu einem kombinieren.