时间戳

首页 > 解决方案 > 我想在 javascript 中点击后初始化 App.init()

javascript - 我想在 javascript 中点击后初始化 App.init()

问题描述

我正在尝试在我的 wordpress 网站上集成一个抵押贷款计算器。我有两个主要问题：

  1. 我想在一个页面上单独集成多个计算器，所以我创建了 html 组件：

<button class="btn btn-primary" onclick="btnclick(this)" data-attr="refinance" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="refinance"></button>

<script type="text/javascript" src="//secure.dominionlending.ca/calculators/js/embed.js">
</script>

<script type="text/javascript">	DLCCALCULATOR.init({ header: { type: 1 }, calculator: [1], button: { type: 3, btnText: "", aId: "", aClass: "" } });</script>

<script type="text/javascript">	DLCCALCULATOR.init({ header: { type: 1 }, calculator: [2], button: { type: 3, btnText: "", aId: "", aClass: "" } });</script>
<div class="row">
    <div class="col-md-6">
        <img src="http://faizalgarasia.com/wp-content/themes/DLCContemporary/img/widgetImages/Mortgage_Payment.svg">
    </div>
<div class="col-md">
<h2>Mortgage Payment</h2>
</div>
</div>

<p>Shave years off your Mortgage and save you thousands by using an accelerated bi-weekly mortgage payment.</p>

<a href="#" class="btn btn-primary mortgagecalculator" id="mortgagecalculator" aId="mortgagecalculator" aClass="mortgagecalculator" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="mortgagecalculator">Use Now</a>

<div class="row">
    <div class="col-md-6">
       <img src="http://faizalgarasia.com/wp-content/themes/DLCContemporary/img/widgetImages/Refinance_Renewal.svg">
    </div>
<div class="col-md">
<h2>Refinance or Renewal Calculator</h2>
</div>
</div>

<p>Gives you quick access to loan options and the difference they can make in your monthly mortgage payment.</p>

<a href="#" aClass: "refinance" aId="refinance" class="btn btn-primary refinance" id="refinance" data-toggle-dlc="modal" data-target="#dlc_calculator_modal" data-view="refinance">Use Now</a>

但是每当我输入脚本时，我只会得到一个计算器。所以我得出了第二个解决方案，即：

  1. 我创建了这样的 if else 语句：

<script src="text\javascrtipt">
function mortagecalculator(btn)
{
  if (btn.mortagecalculator == "mortage") 
  {
      <script type="text/javascript">	DLCCALCULATOR.init({                calculator: [1], button: { type: 3, btnText: "Use Now", aId:        "", aClass: "" } });</script>
  }
  else if (btn.mortagecalculator == "penalty")
  {
    <script type="text/javascript">	DLCCALCULATOR.init({                calculator: [2], button: { type: 3, btnText: "Use Now", aId:        "", aClass: "" } });</script>
  }
}

</script>
<--created two buttons-->

<a onlick="mortagecalculator" data-attr="mortage">Use Now</a>

<a onlick="mortagecalculator" data-attr="penalty">Use Now</a>

输出：它会将我重定向到一个空白页。

标签： javascriptwordpressinitializationcomponents

解决方案

推荐阅读