JavaScript/jQuery 未正确自动加载

Question

当页面首次加载时，它会显示所有价格，直到您单击一个选项。基本上我无法在开始时以每月价格获得 Java 到运行。

如果你想看的话

http://www.infinityhost.net/web-hosting-plans.htm

我附上了代码的三个部分。

我已经检查了所有内容一百万次，但找不到它自动加载 1 个月部分的原因。

// ______________  PRICE SWITCH

    $(window).load(function() {

        $(".price-per-period .per1").click(function() {
            $(".per1a").show();
   $(".per3a").hide();
            $(".per6a").hide();
            $(".per12a").hide();
   $(".per24a").hide();
            $(".price-per-period .per1").addClass("btn-shared-checked");
            $(".price-per-period .per1").removeClass("btn-default");
            $(".price-per-period .per3").removeClass("btn-shared-checked");
            $(".price-per-period .per3").addClass("btn-default");
            $(".price-per-period .per6").removeClass("btn-shared-checked");
            $(".price-per-period .per6").addClass("btn-default");
   $(".price-per-period .per12").removeClass("btn-shared-checked");
            $(".price-per-period .per12").addClass("btn-default");
   $(".price-per-period .per24").removeClass("btn-shared-checked");
            $(".price-per-period .per24").addClass("btn-default");
        });
  
  $(".price-per-period .per3").click(function() {
            $(".per1a").hide();
   $(".per3a").show();
            $(".per6a").hide();
            $(".per12a").hide();
   $(".per24a").hide();
            $(".price-per-period .per1").removeClass("btn-shared-checked");
            $(".price-per-period .per1").addClass("btn-default");
            $(".price-per-period .per3").addClass("btn-shared-checked");
            $(".price-per-period .per3").removeClass("btn-default");
            $(".price-per-period .per6").removeClass("btn-shared-checked");
            $(".price-per-period .per6").addClass("btn-default");
   $(".price-per-period .per12").removeClass("btn-shared-checked");
            $(".price-per-period .per12").addClass("btn-default");
   $(".price-per-period .per24").removeClass("btn-shared-checked");
            $(".price-per-period .per24").addClass("btn-default");
        });

        $(".price-per-period .per6").click(function() {
            $(".per1a").hide();
   $(".per3a").hide();
            $(".per6a").show();
            $(".per12a").hide();
   $(".per24a").hide();
            $(".price-per-period .per1").removeClass("btn-shared-checked");
            $(".price-per-period .per1").addClass("btn-default");
            $(".price-per-period .per3").removeClass("btn-shared-checked");
            $(".price-per-period .per3").addClass("btn-default");
            $(".price-per-period .per6").addClass("btn-shared-checked");
            $(".price-per-period .per6").removeClass("btn-default");
   $(".price-per-period .per12").removeClass("btn-shared-checked");
            $(".price-per-period .per12").addClass("btn-default");
   $(".price-per-period .per24").removeClass("btn-shared-checked");
            $(".price-per-period .per24").addClass("btn-default");
        });

        $(".price-per-period .per12").click(function() {
            $(".per1a").hide();
   $(".per3a").hide();
            $(".per6a").hide();
            $(".per12a").show();
   $(".per24a").hide();
            $(".price-per-period .per1").removeClass("btn-shared-checked");
            $(".price-per-period .per1").addClass("btn-default");
            $(".price-per-period .per3").addClass("btn-default");
            $(".price-per-period .per3").removeClass("btn-shared-checked");
            $(".price-per-period .per6").addClass("btn-default");
            $(".price-per-period .per6").removeClass("btn-shared-checked");
   $(".price-per-period .per12").addClass("btn-shared-checked");
            $(".price-per-period .per12").removeClass("btn-default");
   $(".price-per-period .per24").removeClass("btn-shared-checked");
            $(".price-per-period .per24").addClass("btn-default");
        });
  
  $(".price-per-period .per24").click(function() {
            $(".per1a").hide();
   $(".per3a").hide();
            $(".per6a").hide();
            $(".per12a").hide();
   $(".per24a").show();
            $(".price-per-period .per1").removeClass("btn-shared-checked");
            $(".price-per-period .per1").addClass("btn-default");
            $(".price-per-period .per3").addClass("btn-default");
            $(".price-per-period .per3").removeClass("btn-shared-checked");
            $(".price-per-period .per6").addClass("btn-default");
            $(".price-per-period .per6").removeClass("btn-shared-checked");
   $(".price-per-period .per12").removeClass("btn-shared-checked");
            $(".price-per-period .per12").addClass("btn-default");
   $(".price-per-period .per24").addClass("btn-shared-checked");
            $(".price-per-period .per24").removeClass("btn-default");
        });
  });

<span class="chooseprice">Choose price per period</span>
                <div class="btn-group price-per-period" role="group">
<button type="button" class="btn btn-shared-checked per1">1 month</button>
<button type="button" class="btn btn-default per3">3 months</button>
<button type="button" class="btn btn-default per6">6 months</button>
<button type="button" class="btn btn-default per12">1 year</button>
<button type="button" class="btn btn-default per24">2 years</button>
                </div>




            <div class="col-sm-3 wow fadeInUp" data-wow-delay="0.4s">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="text-center">Easy</h3></div>
                        
                        
                        <div class="panel-body text-center">
                        <div class="per1a">
                            <h4>.99</h4>
                            <span class="per">1 month</span>
                        </div>
                        <div class="per3a">
                            <h4>.00</h4>
                            <span class="per">3 months</span>
                        </div>
                        <div class="per6a">
                            <h4>.00</h4>
                            <span class="per">6 months</span>
                        </div>
                        <div class="per12a">
                            <h4>.00</h4>
                            <span class="per">12 months</span>
                        </div>
                        <div class="per24a">
                            <h4>.00</h4>
                            <span class="per">24 months</span>
                        </div>
                    </div>

Answer 1

所有控制显示哪些项目的代码都驻留在不同按钮的点击侦听器中。当没有按钮被点击时，该代码的 none 被执行。所有元素都在您的标记中可见，并且您没有在页面加载时执行任何试图更改它的 JavaScript。

通过向要隐藏的 div 添加 style="display: none;" 来在标记中定义起始行为，或者模拟页面加载时的点击：$(".price-per-period .per1").click();

另一方面，您的代码非常重复。如果按钮和面板有一些共同的 classes，你可以为自己节省很多代码，这样你就可以在一个 select 中解决它们，如果你将点击监听器提取到一个共同的功能.

如果 .per1a、.per2a 等都有 class per-a，你可以这样做：

function setActivePanel(name) {
   $('.per-a').hide();
   $('.'+name).show();
}

然后你可以调用setActivePanel('per1a')或setActivePanel('per2a')等

对于您的按钮，您可以分配一个单击侦听器：

$('.price-per-period .btn').click(function() {

   $('.price-per-period .btn')
      .removeClass('btn-shared-checked')
      .addClass('btn-default');

   $(this)
      .addClass('btn-shared-checked')
      .removeClass('btn-default');

   // now all you need to do is call the correct setActivePanel

});

对于setActivePanel，添加一个数据属性：

<button type="button" class="btn btn-shared-checked per1" data-target="per1a">1 month</button>

然后在您的点击监听器中，您可以像这样访问它：

setActivePanel($(this).data('target'));

既然您已经重构，您可能会发现解决原始问题的最简单方法是让 DOMReady 侦听器调用 setActivePanel('per1a');

JavaScript/jQuery 未正确自动加载

JavaScript/jQuery not loading correctly automatically

javascript

jquery

loading