Jqueryは初期値を設定します

Question

あなたが私を助けることを願っています。 Jquery/Javascriptで要素の初期値を設定するにはどうすればよいですか？

私の問題を説明するために、私は以下のスニペットを持っています。 私のスニペットは、私が望むように機能しますが、 "onclick"の後にのみ動作します。ページを読み込むと、正しい値が得られません。この場合、「月間表示」をクリックして80€を表示し、「年表示」をクリックして800€を表示したいと思っています。しかし、それは私がページをロードするときではなく、クリック後にのみ機能します。

おかげ

//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

ちょうど$(document).ready()内部が、クリックハンドラ外p要素を示し、隠しコードを実行します。最初の$(document).ready()機能は必要ありません。それらを1つにまとめることができます。