Question

我已经制作了两种形式。用户可以从每个表单中选择一个值（产品），然后将价格显示在具有唯一类的单独元素中。当选择表单中的一个选项时，其他选项将被隐藏。我做到了现在，我似乎无法将这些值从元素中加入到。这是我为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 非常感谢任何帮助

Answer 1

看看这个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。

从2个span元素求和两个值（用户可以通过下拉列表选择每个span元素的值）

1 个答案: