【问题标题】:Jquery set the initial valuejquery设置初始值
【发布时间】:2016-12-23 10:46:13
【问题描述】:

希望你能帮助我。如何在 Jquery/Javascript 中设置元素的初始值?

为了解释我的问题,我有以下 sn-p。 我的 sn-p 可以按我的意愿工作,但仅在“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>

【问题讨论】:

    标签: javascript jquery onclick domready


    【解决方案1】:

    只需运行在$(document).ready() 内但在点击处理程序之外显示和隐藏p 元素的代码。不需要第一个$(document).ready()函数;您可以将它们合二为一。

    【讨论】:

    • 嗨,谢谢你的时间,是的,你说得对,我这样做是为了更好地展示我的问题。但将它们结合起来,实际上并没有什么区别。 “p”元素已经隐藏(在 html 中使用“display:none”)。我无法正确获取初始值(在页面加载时)。
    • 啊! "$(".teste").html();" 所以这就是问题所在。它正在以这种方式工作。但是仍然不太明白为什么“this”指的是“.teste”时不起作用。不管怎样,我一定会研究的。 非常感谢您抽出宝贵时间。 :)
    • 当然,没问题。我认为问题在于您正在监听 $(".teste") 是否准备就绪,但直到整个文档准备就绪后才添加监听器。
    猜你喜欢
    • 2012-04-12
    • 2012-10-16
    • 2019-01-23
    • 1970-01-01
    • 2015-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多