                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(五)一Ajax应用与常用插件

自己改了一点$.extend() 不知道为什么不好用

<!DOCTYPE html>
<html>
    <head>
        <title>使用$.extend()扩展工具函数</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定义工具函数求两值中最小值</span> 
                <span class="fr">
                	<input type="text" id="num1" />
                	<input type="text" id="num2" />
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            /*------------------------------------------------------------/
            功能：返回两个数中最小值

            /------------------------------------------------------------*/
            (function ($) {
                $.extend({
                    "MinNum": function (p1, p2) {
                        return (p1 > p2) ? p2 : p1;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "最小的数是：";
                    var num1=$('#num1').val();
                    var num2=$('#num2').val();
                    strTmp += $.MinNum(num1, num2);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>
</html>

显示的永远是num1的数老哥们帮我看看哪里出问题了

一家之煮

2017-02-08

源自：jQuery基础(五)一Ajax应用与常用插件 4-8

关注问题我要回答

985

操作

收起

5 回答

_嘟_
2019-06-03

var num1=$('#num1').val();

var num2=$('#num2').val();

num1,num2为字符串格式，要转换为数字才能正确比较。

var num1=parseInt($('#num1').val());

var num2=parseInt($('#num2').val());

0 回复有任何疑惑可以回复我~

收起回答

solace_lee
2018-06-18

$(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "最小的数是：";
                    var num1=$('#num1').val()*1;
                    var num2=$('#num2').val()*1;
                    strTmp += $.MinNum(num1, num2);
                    //显示在页面中
                    $(".tip").show().append(strTmp);
                });
            });

判断错误的原因是num1,num2这样赋值的类型是字符串，加上*1运算转换为数字类型就可以了。

0 回复有任何疑惑可以回复我~

收起回答

web_東
2018-04-26

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>使用$.extend()扩展工具函数</title>
    <style type="text/css">
        #divtest{
            width:320px;
            margin:100px auto;
        }
        .tip{
            margin:10px 0;
            background-color:#00a5e7;
            display: none;
        }


    </style>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>

<body>
<div id="divtest">
    <div class="title">
        <span class="fl">自定义工具函数求两值中最小值</span><br/>
        <span class="fr">
                    <input type="text" id="num1" /><br/>
                    <input type="text" id="num2" />
                    <input id="btnShow" name="btnShow" type="button" value="计算" />
                </span>
    </div>
    <div class="content">
        <div class="tip"></div>
    </div>
</div>

<script type="text/javascript">
    /*------------------------------------------------------------/
     功能：返回两个数中最小值

     /------------------------------------------------------------*/
 (function ($) {
        $.extend({
            "MinNum": function (p1, p2) {
                return (p1 > p2) ? p2 : p1;
            }
        });
    })(jQuery);
    $(function () {
        $("#btnShow").bind("click", function () {
            $(".tip").html("");
            var strTmp = "最小的数是：";
            var num1=$('#num1').val();
            var num2=$('#num2').val();
            strTmp += $.MinNum(num1, num2);
            //显示在页面中
 $(".tip").show().append(strTmp);
        });
    });
</script>
</body>
</html>

输入值超过999就出现bug？

0 回复有任何疑惑可以回复我~

收起回答

Chai_陌路

我试了一下数值超过9990就不行了

2018-06-11 回复有任何疑惑可以回复我~

solace_lee 回复 Chai_陌路

测试并没有这个限制，应该是你的代码有地方出问题了

2018-06-18 回复有任何疑惑可以回复我~