Jquery 显示使用 Switchgle隐藏多个 div 并使用 ParseFloat 更改价格(改进新手代码)

Question

这是我第一次尝试使用JQuery，我可能已经写了太多代码了。

我有两个链接，Toggle隐藏多个div，也改变上面的定价…

从本质上讲，我认为我可能以一种极其低效和幼稚的方式做了这件事——任何关于如何使我的代码更好的帮助都将是伟大的。

$(document).ready(function() {
    $('.partner-info').hide();
    $('.children-info').hide();
    $('#partner-cross').hide();
    $('#children-cross').hide();
        $('.add-partner').click(function(){
        if ( $('.partner-info').css('display') == 'block' ) {
        $('.partner-info').toggle();
        $('#partner-cross').toggle();
        $('#add-partner').text("add partner");
        $('#partner-li').toggleClass('selected');
        $('#Lvl01').html(parseFloat(parseFloat($('#Lvl01').html())-10.00).toFixed(2));
        $('#Lvl02').html(parseFloat(parseFloat($('#Lvl02').html())-18.00).toFixed(2));
        } else {
        $('.partner-info').toggle();
        $('#partner-cross').toggle();
        $('#add-partner').text("for your partner");
        $('#partner-li').toggleClass('selected');
        $('#Lvl01').html(parseFloat(parseFloat($('#Lvl01').html())+10.00).toFixed(2));
        $('#Lvl02').html(parseFloat(parseFloat($('#Lvl02').html())+18.00).toFixed(2));
        }
        });
        $('.add-children').click(function(){
        if ( $('.children-info').css('display') == 'block' )    {
        $('.children-info').toggle();
        $('#children-cross').toggle();
        $('#add-children').text("add children");
        $('#children-li').toggleClass('selected');
        $('#Lvl01').html(parseFloat(parseFloat($('#Lvl01').html())-0.50).toFixed(2));
        $('#Lvl02').html(parseFloat(parseFloat($('#Lvl02').html())-0.50).toFixed(2));
        } else {                                          
        $('.children-info').toggle();
        $('#children-cross').toggle();
        $('#add-children').text("for your children");
        $('#children-li').toggleClass('selected');
        $('#Lvl01').html(parseFloat(parseFloat($('#Lvl01').html())+0.50).toFixed(2));
        $('#Lvl02').html(parseFloat(parseFloat($('#Lvl02').html())+0.50).toFixed(2));
        }
        }); 
});

     <table class="edutable">
            <tbody>
                <tr>
                    <td class="first"><strong>Plan level</strong></td>
                    <td class="second"></td>
                    <td class="third">1</td>
                    <td class="fourth">2</td>
                </tr>                    
                <tr>
                    <td class="first"><strong>Monthly price</strong></td>
                    <td></td>
                    <td class="monthly-prices"><strong>&pound;<span id="Lvl01">10.00</span></strong></td>
                    <td class="monthly-prices"><strong>&pound;<span id="Lvl02">18.00</span></strong></td>
                </tr>
                <tr>
                    <td class="first"><br /></td>
                    <td><br /></td>
                    <td><br /></td>
                    <td><br /></td>
                </tr>
                <tr>
                    <td colspan="4" class="tabs">
                        <div class="tabsinner">
                            <div class="benefits">Benefits:</div>
                            <ul>
                             <li class="selected"><span>for you</span></li>
                             <li id="partner-li"><span><a href="#" id="add-partner" class="add-partner">add partner</a></span></li>
                             <li id="partner-cross"><a href="#" id="cross-p" class="add-partner"><img src="images/cross.gif" /></a></li>
                             <li id="children-li"><span><a href="#" id="add-children" class="add-children">add children</a></span></li>                                                                                                     <li id="children-cross"><a href="#" id="cross-c" class="add-children"><img src="images/cross.gif" /></a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" class="heading">Essential Cover <span>(1 year benefit period)</span></td>
                </tr>
                <tr>
                <td class="first"><strong>Dental</strong></td>
                <td class="second">
                 <div class="you">Just for you</div>
                 <div class="partner-info">Partner</div>
                 <div class="children-info">Dependent Children</div></td>
                <td>
                 <div class="you"><span class="small">up to </span><strong>&pound;65</strong></div>
                 <div class="partner-info"><span class="small">up to </span><strong>&pound;65</strong></div>
                 <div class="children-info"><span class="small">up to </span><strong>&pound;65</strong></div></td>
                <td>
                 <div class="you"><span class="small">up to </span><strong>&pound;120</strong></div>
                 <div class="partner-info"><span class="small">up to </span><strong>&pound;120</strong></div>
                 <div class="children-info"><span class="small">up to </span><strong>&pound;120</strong></div></td>
                </tr>
            </tbody>
        </table>

查看HTML &CSS这里有一个链接到jsFiddle http://jsfiddle.net/superhanzzz/mVByn/

感谢

西部佬

Answer 1

我认为有很多东西可以优化。

javascript上的短列表:

• 删除hide()的前4个调用，最好在你的css声明中添加以下css #children-cross,.partner-info,.children-info,#partner-cross{display:none;}。
• 两个点击选项有很多共同点，你可以分解它们
• 在每个点击里面的if和else也有很多共同之处，也可以被分组。

如果你不想自己搜索如何做到这一点，这里是一些JavaScript的例子，将做同样的(可能有一些东西要改进/改变，但它只是得到一个想法):

$(document).ready(function() {
   $('.add-partner').click(function(){
       handleClick("partner",10,18);
   });
   $('.add-children').click(function(){
       handleClick("children",0.5,0.5);
   });       
});
function add(a,b){
   return a+b;
}
function minus(a,b){
   return a-b;
}
function handleClick(keyword,plan1Diff, plan2Diff){
   var condition = $('.'+keyword+'-info').css('display') === 'block';
   var newText = (condition) ? "add "+keyword:"for your "+keyword;
   var func =(condition) ? minus : add;
   $('.'+keyword+'-info').toggle();
   $('#'+keyword+'-cross').toggle();
   $('#add-'+keyword).text(newText);
   $('#'+keyword+'-li').toggleClass('selected');
   $('#Lvl01').text(func(parseFloat($('#Lvl01').text()),plan1Diff).toFixed(2));
   $('#Lvl02').text(func(parseFloat($('#Lvl02').text()),plan2Diff).toFixed(2));
}