JavaScript/jQuery未自动正确加载
JavaScript/jQuery not loading correctly automatically
当页面第一次加载时，它会显示所有价格，直到您单击某个选项。基本上，我无法以每月的价格让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>$2.99</h4>
<span class="per">1 month</span>
</div>
<div class="per3a">
<h4>$9.00</h4>
<span class="per">3 months</span>
</div>
<div class="per6a">
<h4>$15.00</h4>
<span class="per">6 months</span>
</div>
<div class="per12a">
<h4>$27.00</h4>
<span class="per">12 months</span>
</div>
<div class="per24a">
<h4>$54.00</h4>
<span class="per">24 months</span>
</div>
</div> 所有控制显示哪些项的代码都位于不同按钮的点击监听器中。如果没有单击任何按钮，则不会执行任何代码。所有元素在标记中都是可见的，并且在页面加载时不会执行任何试图改变这一点的JavaScript。
通过将style="display: none;"添加到要隐藏的div中，或者在标记中定义您的启动行为：$(".price-per-period .per1").click();
另一方面，您的代码非常重复。如果按钮和面板有一些公共类，那么你可以节省很多代码，这样你就可以在一次选择中处理所有这些类，如果你将点击监听器提取到一个公共函数中。
如果.per1a、.per2a等都具有类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
- 什么'这是加载jQuery的最佳方式
- 在WordPress站点中加载jquery.js后加载javascript代码
- 延迟加载jquery后替换$(document）.ready(function）
- 如何使用onLoad加载jQuery JSON.从Zipcode On Form获取城市和州
- 对页面重新加载 Jquery 执行操作
- 在Ajax(过滤器）加载之后加载jQuery脚本
- 异步加载JQuery时Tabbed Box已损坏
- 加载Jquery时Chrome扩展出错
- 在更改事件上加载jQuery DataTable
- 手动加载JQuery而不触发内容安全策略
- 如果更改，请在ng之后重新加载Jquery
- 脚本似乎在加载jQuery之前运行-未定义Uncaught ReferenceError:$
- 在使用jquery之前动态加载jquery
- 如何重新加载jquery，以便它能为下一个进程工作
- Firefox没有't从ajax.googleapis.com加载jquery
- 我无法在自定义Wordpress主题中成功加载jQuery
- 正在从maphilight href加载Jquery选项卡
- 如何在完全加载html之后加载jquery代码段
- 在页面加载jQuery/Javascript时，按.class对表行进行排序
