Я пытаюсь интегрировать калькулятор затрат на моем сайте WordPress.У меня есть 2 основные проблемы:
- Я хочу интегрировать несколько калькуляторов на одной странице по отдельности, поэтому я создал 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>
Но всякий раз, когда я ставлю сценарии, я получаю только один калькулятор.поэтому я вывел второе решение:
Я создал оператор 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>
Вывод: он перенаправит меня на пустую страницу.