求和2个跨度元素中的两个值(用户可以通过下拉菜单选择每个跨度元素的值）
Sum two values from 2 span elements (the values for each span element can be selected by the user via dropdown)
我制作了两个表格。用户可以从每个表单中选择一个值（产品），然后将其价格显示在具有唯一类的单独元素中。当表单中的一个选项被选中时，其他选项将被隐藏。我做到了。现在，我似乎无法将这些元素的值求和到。以下是我为html:所做的工作
<div id="netpaketi-wrapper">
<strong><p class="textmain"><b>Изберете го Вашиот хостинг пакет</b>
</p></strong>
<form class="hosting-biranje" action="">
<select name="hosting">
<option value="licen" class="ls" selected="selected">ЛИЧЕН СЕРВЕР</option>
<option value="biznisl" class="bl">БИЗНИС L</option>
<option value="xl" class="bxl">БИЗНИС XL</option>
<option value="xxl" class="bxxl">БИЗНИС XXL</option>
</select>
</form>
<div id="opis-paket">
<div class="hosting-paket-opis licen-s">
<p class="opisno">Windows/Linux</p>
<p class="opisno">РАМ до 1GB</p>
<p class="opisno">Процесор: Intel-core-I-7-4770</p>
<p class="opisno">Bandwith 570 Mbits/s</p>
<p class="opisno">Безбедност на податоците (SSL)</p>
<p class="opisno">Бeсплатен домен</p>
<p class="opisno">FTP пристап</p>
</div>
<div class="hosting-paket-opis server-l">
<p class="opisno">Windows/Linux</p>
<p class="opisno">РАМ до 2GB</p>
<p class="opisno">Процесор: Intel-core-I-7-4770</p>
<p class="opisno">Bandwith 570 Mbits/s</p>
<p class="opisno">Безбедност на податоците (SSL)</p>
<p class="opisno">Бeсплатен домен</p>
<p class="opisno">FTP пристап</p>
</div>
<div class="hosting-paket-opis server-xl">
<p class="opisno">Windows/Linux</p>
<p class="opisno">РАМ до 4GB</p>
<p class="opisno">Процесор: Intel-core-I-7-4770</p>
<p class="opisno">Bandwith 570 Mbits/s</p>
<p class="opisno">Безбедност на податоците (SSL)</p>
<p class="opisno">Бeсплатен домен</p>
<p class="opisno">FTP пристап</p>
</div>
<div class="hosting-paket-opis server-xxl">
<p class="opisno">Windows/Linux</p>
<p class="opisno">РАМ до 8GB</p>
<p class="opisno">Процесор: Intel-core-I-7-4770</p>
<p class="opisno">Bandwith 570 Mbits/s</p>
<p class="opisno">Безбедност на податоците (SSL)</p>
<p class="opisno">Бeсплатен домен</p>
<p class="opisno">FTP пристап</p>
</div>
<p class="opisno">Цена: <span class="cena-hosting">1200</span> денари годишно</p>
</div>
这是第一个表单的html。第二个表单的html是：
<div id="netpaketi-wrapper">
<strong><p class="textmain"><b>Изберете го Вашиот вебсајт пакет</b>
</p></strong>
<form class="vebsajt-biranje" action="">
<select name="vebpaket">
<option value="osnoven" class="vpo" selected="selected">ОСНОВЕН</option>
<option value="e-mono" class="vpem">Е-МОНО</option>
<option value="e-duo" class="vped">Е-ДУО</option>
<option value="e-divers" class="vpedi">Е-ДИВЕРС</option>
<option value="osnoven-market" class="vpmo">МАРКЕТ ОСНОВЕН</option>
<option value="mono-market" class="vpmm">МАРКЕТ МОНО</option>
<option value="duo-market" class="vpmd">МАРКЕТ ДУО</option>
<option value="diverce-market" class="vpmdi">МАРКЕТ ДИВЕРС</option>
</select>
</form>
<div id="opis-paket">
<div class="vebsajt-paket-opis osnoven-paket">
<p class="opisno">Сајт дизајниран од нас според Вашите потреби</p>
</div>
<div class="vebsajt-paket-opis e-mono-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни ќе имаат сличен изглед и функции</p>
</div>
<div class="vebsajt-paket-opis e-duo-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чија почетна страна ќе се разликува од останатите страни во поглед на функции изглед</p>
</div>
<div class="vebsajt-paket-opis e-divers-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни значително ќе се разликуваат во поглед на функции и изглед</p>
</div>
<div class="vebsajt-paket-opis market-osnoven-paket">
<p class="opisno">Сајт дизајниран од нас според Вашите потреби. Интегрирано е-плаќање</p>
</div>
<div class="vebsajt-paket-opis market-mono-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни ќе имаат сличен изглед и функции. Интегрирано е-плаќање</p>
</div>
<div class="vebsajt-paket-opis market-duo-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чија почетна страна ќе се разликува од останатите страни во поглед на функции изглед. Интегрирано е-плаќање</p>
</div>
<div class="vebsajt-paket-opis market-divers-paket">
<p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни значително ќе се разликуваат во поглед на функции и изглед. Интегрирано е-плаќање</p>
</div>
<p class="opisno">Цена: <span class="cena-vebsajt">6000</span> денари</p>
</div>
应该显示总和的元素是：
<a href="#" class="g-btn type_primary"><span class="iznos"></span> денари</a>
这是html，这是用于隐藏/显示所选值的jQuery代码：
<script>
var jq=$.noConflict();
jq(document).ready(function(){
jq(".ls").click(function(){
jq(".licen-s").show();
jq(".server-l, .server-xl, .server-xxl").hide();
jQuery.removeData(".cena-hosting");
jq(".cena-hosting").text("1200");
});
jq(".bl").click(function(){
jq(".server-l").show();
jq(".licen-s, .server-xl, .server-xxl").hide();
jQuery.removeData(".cena-hosting");
jq(".cena-hosting").text("2200");
});
jq(".bxl").click(function(){
jq(".server-xl").show();
jq(".server-l, .licen-s, .server-xxl").hide();
jQuery.removeData(".cena-hosting");
jq(".cena-hosting").text("2600");
});
jq(".bxxl").click(function(){
jq(".server-xxl").show();
jq(".server-l, .server-xl, .licen-s").hide();
jQuery.removeData(".cena-hosting");
jq(".cena-hosting").text("2900");
});
jq(".vpo").click(function(){
jq(".osnoven-paket").show();
jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("6000");
});
jq(".vpem").click(function(){
jq(".e-mono-paket").show();
jq(".osnoven-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("36000");
});
jq(".vped").click(function(){
jq(".e-duo-paket").show();
jq(".e-mono-paket, .osnoven-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("56000");
});
jq(".vpedi").click(function(){
jq(".e-divers-paket").show();
jq(".e-mono-paket, .e-duo-paket, .osnoven-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("66000");
});
jq(".vpmo").click(function(){
jq(".market-osnoven-paket").show();
jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .osnoven-paket, .osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("26000");
});
jq(".vpmm").click(function(){
jq(".market-mono-paket").show();
jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .osnoven-paket, .market-duo-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("56000");
});
jq(".vpmd").click(function(){
jq(".market-duo-paket").show();
jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .osnoven-paket, .market-divers-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("86000");
});
jq(".vpmdi").click(function(){
jq(".market-divers-paket").show();
jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .osnoven-paket").hide();
jQuery.removeData(".cena-vebsajt");
jq(".cena-vebsajt").text("160000");
});
});
</script>
前四块代码用于第一种形式，最后8块代码用于第二种形式。总的来说，我已经尝试了这个代码：
<script>
var jq=$.noConflict();
jq(document).ready(function(){
var newprice = Number(text(".cena-vebsajt")) + Number(text(".cena-hosting"));
jq('.iznos').append(newprice);
});
</script>
但我无法得到结果，它没有显示任何价值我也尝试过：
<script>
var jq=$.noConflict();
jq(document).ready(function(){
var newprice = Number(.cena-vebsajt) + Number(".cena-hosting");
jq('.iznos').append(newprice);
});
</script>
但是，同样没有结果。以下是该页面的链接：http://netarchitecture.de/mk/netpaketi.asp任何帮助都非常感谢
查看此JSFiddle:
http://jsfiddle.net/e3e4vhkj/
诀窍是根据你的数字使用parseFloat或parseInt。
var one=parseFloat($('.cena-vebsajt').text());
var two=parseFloat($('.cena-hosting').text());
var res=one+two;
$('.result').text(res);
但是，当您不确定跨度的文本是否可以是非数字时，请小心。例如，使用$.isNumeric。
相关文章：
- 我可以通过JQuery将CSS类交换为一个特殊的元素集吗
- 覆盖可以通过它前面的元素点击
- 有没有一种通用方法可以通过Javascript访问没有id的DOM元素
- 我可以通过 Javascript 中第一个元素的值选择二维数组的第二个元素吗?
- 如何使元素鼠标不可点击，但可以通过javascript单击
- handlebarsjs - 我可以通过 json 键访问元素吗?
- MVC 剃须刀显示元素，可以通过 JavaScript 进行编辑
- 求和2个跨度元素中的两个值(用户可以通过下拉菜单选择每个跨度元素的值）
- 是否可以通过nightwatch.js设置元素的Style属性的值?如果是，那么如何
- 纯Javascript可以获取所有span元素，但可以通过定义的类进行特定的编辑
- 是否可以通过单击来更改元素的类
- 是否可以通过具有“属性值”;标题“;获取父元素
- 是否可以通过jQuery.load()加载外部元素后滚动到锚点
- 是否有一种方法可以通过编程触发TAB键将焦点移动到下一个可聚焦的元素
- 是否可以通过父文档访问Shadow DOM元素?
- Javascript-有没有一种方法可以通过一个命令来销毁数组中的所有元素
- 我可以通过id直接访问DOM元素吗?
- 可以通过浏览器中的开发人员控制台将值附加到选择元素上吗?
- 是否可以通过其下降隐藏值来访问HTML元素
- 不能使用 jquery 和 d3 通过 id 获取元素，但可以通过本机代码工作
