根据输入更改URL

时间:2018-10-06 21:24:58

标签: javascript

我已经进行了计算(以丹麦语计算),用户可以通过将保险转移到新公司来查看他们节省了多少钱。

但是,我需要研究如何将用户点击过的产品发送到网上商店。因此,如果用户单击“汽车”(丹麦语为“ Bil”)和“家庭”(丹麦语为“ Indbo”),则CTA中的URL应该从静态https://www.if.dk/privat/forsikringer更改为https://www.if.dk/privat/webshop?ifdkws_new=familie,bil。那么参数之后呢?应该取决于用户单击了什么。每个产品都有一个可以在ifdkws_new中分配的名称。

我对JavaScript还是很陌生,所以我还在学习。但是,我需要在操作方面提供一些指导,因为我发现这样做有些混乱。

BR马丁

链接到解决方案:https://codepen.io/madsenfc/pen/ePJGzR

<link rel="stylesheet" href="//cdnsc.azureedge.net/resources/global-css.arc.min-sha2jDVdOjGrwZU6aSsKp-yS9_lE418.css"/>

<div id="fordelApp">
  <div id="container">
    <h1 class="ecmt-text-fat">Hvor meget kan du spare?</h1>
    <strong class="ecmt-text-handwriting">Når du samler dine forsikringer hos os.</strong>

    <div class="toggleRow">
      <button class="toggle" value=10>Bil<span class="togglePlus">+</span></button>
      <button class="toggle" value=5>Indbo<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Hund<span class="togglePlus">+</span></button>
      <button class="toggle" value=5>Hus<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Rejse<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Ulykke<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Børn<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Båd<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Campingvogn<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Sommerhus<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Liv<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>MC<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Trailer<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Voksen<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Knallert<span class="togglePlus">+</span></button>
    </div>
    <br/><br/>

    <div id="outcome">
      <div class="containerValue" id="selvrisiko">
        <h1 class="ecmt-text-fat">
          <div id="selvrisikoValue">0 kr.</div>
        </h1>
        <strong class="ecmt-text-handwriting">Selvrisikoopsparing</strong>
      </div>
      <div class="containerValue" id="rabat">
        <h1 class="ecmt-text-fat">
          <div id="rabatValue">0 %</div>
        </h1>
        <strong class="ecmt-text-handwriting">Rabat på alle forsikringer</strong>
      </div>
      <div class="containerValue" id="forsikringstjek">
        <h1 class="ecmt-text-fat">
          <div id="forsikringstjekValue">Årlig</div>
        </h1>
        <strong class="ecmt-text-handwriting">Forsikringssservice</strong>
      </div>

    </div>

  </div>
  <div class="fordelAppCTA ecmt-text-centered" id="2535ce2e-c361-4c1c-878a-182a33bc1245">
    <a href="/privat/forsikringer" target="" class="ecmt-button theme-bg-green">Beregn pris på forsikringer</a>
  </div>
</div>

var totalAmount = 0;
$(document).ready(function() {
  $(".toggle").on("click", function() {
    var value = $(this).val();
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
      totalAmount = parseInt(totalAmount) - parseInt(value);
    } else {
      $(this).addClass("selected");
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }

    console.log(totalAmount);

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("selvrisikoValue").innerHTML = "500 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("selvrisikoValue").innerHTML = "200 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount === 15) {
      document.getElementById("selvrisikoValue").innerHTML = "200 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount > 4 && totalAmount < 15) {
      document.getElementById("selvrisikoValue").innerHTML = "100 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else {
      document.getElementById("selvrisikoValue").innerHTML = "0 kr.";
      document.getElementById("selvrisiko").style.color = "#9fd0c9";
    }

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount === 15) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount > 4 && totalAmount < 15) {
      document.getElementById("rabatValue").innerHTML = "10 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else {
      document.getElementById("rabatValue").innerHTML = "0 %";
      document.getElementById("rabat").style.color = "#9fd0c9";
    }

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("forsikringstjek").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("forsikringstjek").style.color = "#9fd0c9";
    } else {
      document.getElementById("forsikringstjek").style.color = "#9fd0c9";
    }
  });
});

2 个答案:

答案 0 :(得分:1)

您可以使用window.location属性轻松更改JavaScript中的URL:

window.location = 'https://www.if.dk/privat/webshop?ifdkws=familie,bil';

答案 1 :(得分:0)

首先将ID添加到您想要单击的内容中:

var bil = false;
var indbo = false;

document.getElementById("bil").addEventListener("click", function() {
    bil = !bil;
    if (bil && indbo) {
        window.location = "https://www.if.dk/privat/webshop?ifdkws_new=familie,bil";
    }
    else if (bil) {
        window.location = window.location.split("familie,").join("");
    }
    else if (indbo) {
        window.location = window.location.split("car").join("");
    }
})

document.getElementById("indbo").addEventListener("click", function() {
    indbo = !indbo;
    if (bil && indbo) {
        window.location = "https://www.if.dk/privat/webshop?ifdkws_new=familie,bil";
    }
    else if (bil) {
        window.location = window.location.split("familie,").join("");
    }
    else if (indbo) {
        window.location = window.location.split("car").join("");
    }
})

然后添加此JavaScript:

var foo = 0;
var bar = 0;
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];

function getSum(arr, sum) {
    sum = arr.reduce(function(accum, val) {
      return accum += val;
    }, 0)
}

getSum(arr1, foo); //expect foo to equal 15, but it stays at 0
getSum(arr2, bar); //expect bar to equal 40, but it stays at 0