javascript - 根据输入更改 URL

Question

我做了一个计算(用丹麦语)，用户可以看到通过将保险转移到新公司可以节省多少钱。

但是，我需要研究如何将用户发送到带有他们点击的产品的网上商店。因此，如果用户点击“Car”(丹麦语“Bil”)和“Family”(丹麦语“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";
    }
  });
});

Answer 1

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

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