如何在点击时更改定价表中的价格

问题描述 投票:0回答:3

我想创建像这样工作的价格更改按钮,

链接:https://www.teamgate.com/pricing/

如果有任何java脚本或任何东西请给我解决方案 预先感谢。

javascript jquery html css twitter-bootstrap
3个回答
2
投票

您还没有展示您尝试过的任何内容,这可以通过多种方式完成。仅显示我创建的一个小片段,其余的研究和编码取决于您。

jQuery(function() {
  $('.hash').click(function() {
    $('.price').html("€8.39");
    $('.price2').html("€10.06");
  });
});

jQuery(function() {
  $('.percent').click(function() {
    $('.price').html("£7.45");
    $('.price2').html("£8.93");
  });
});
div.price {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
}

div.price2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">$10</div>
<div class="price2">$12</div>
<button class="hash">Euro</button>
<button class="percent">Pound</button>


0
投票

没有您的代码,我无法编写正确的解决方案,但查看您给出的示例,我建议使用 HTML DOM insideHTML 属性。我将在这里留下文档的链接,其中有完美的解释。 文档链接

使用innerHTML,您将能够随时动态更改特定元素的内容。希望这对您有帮助!

我编写了一些代码片段。告诉我这是否是您想要的(带有表格或 div)。

function doFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
}
<!DOCTYPE html>
<html>
<body>
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
<p id="demo">Click me to change my HTML content (innerHTML).</p>
</body>
</html> 


0
投票
jQuery(function() {
  $('.hash').click(function() {
    $('.price').html("€8.39");
    $('.price2').html("€10.06");
  });
});

jQuery(function() {
  $('.percent').click(function() {
    $('.price').html("£7.45");
    $('.price2').html("£8.93");
  });
});
div.price {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
}

div.price2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">$10</div>
<div class="price2">$12</div>
<button class="hash">Euro</button>
<button class="percent">Pound</button>
© www.soinside.com 2019 - 2024. All rights reserved.