在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 學(xué)著封裝關(guān)于++1，--1的業(yè)務(wù)代碼，有什么沒(méi)有可以優(yōu)化的地方，如下圖和代碼

學(xué)著封裝關(guān)于++1，--1的業(yè)務(wù)代碼，有什么沒(méi)有可以優(yōu)化的地方，如下圖和代碼

如圖中的 + -

clipboard.png

代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    <script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';</script>
</head>
<body>
<header class="app-header">
    <div class="header-left">
        <img src="image/header_go_back.png" alt="img"/>
    </div>
    <div class="header-center">布置作業(yè)</div>
    <div class="header-right"></div>
</header>
<!--布置作業(yè)-->
<section class="app-homework-arrange">
    <ul class="arrange-header">
        <li class="header-item">
            <a href="#">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">1.有理數(shù)</span>
                <input class="item-right" type="checkbox"/>
            </a>
        </li>
        <li class="header-item">
            <a href="#">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">2.整式的加減</span>
                <input class="item-right" type="checkbox"/>
            </a>
        </li>
        <li class="header-item">
            <a href="#">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">3.一元一次方程</span>
                <input class="item-right" type="checkbox"/>
            </a>
        </li>
        <li class="header-item">
            <a href="#">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">4.幾何圖形初步</span>
                <input class="item-right" type="checkbox"/>
            </a>
        </li>
        <li class="header-item">
            <a href="#">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">5.相交線與平行線</span>
                <input class="item-right" type="checkbox"/>
            </a>
        </li>
        <li class="header-item">
            <a href="">
                <img class="item-left" src="image/triangle_right.png" alt="img"/>
                <span class="item-center">6.平面直角坐標(biāo)系</span>
                <input class="item-right" type="checkbox"/>
            </a>
            <ul>
                <li><span></span>平面直角坐標(biāo)系</li>
                <li><span></span>坐標(biāo)方法的簡(jiǎn)單應(yīng)用</li>
                <li><span></span>直角坐標(biāo)</li>
                <ul>
                    <li><span></span>平面直角坐標(biāo)系</li>
                    <li><span></span>坐標(biāo)方法的簡(jiǎn)單應(yīng)用</li>
                    <li><span></span>直角坐標(biāo)</li>
                </ul>
            </ul>
        </li>
    </ul>
    <ul class="arrange-body">
        <li class="body-item">
            <span class="item-left">單選:</span>
            <div class="item-right">
                <span class="add"></span>
                <span class="number">1</span>
                <span class="minus"></span>
            </div>
        </li>
        <li class="body-item">
            <span class="item-left">多選:</span>
            <div class="item-right">
                <span class="add"></span>
                <span class="number">1</span>
                <span class="minus"></span>
            </div>
        </li>
        <li class="body-item">
            <span class="item-left">判斷:</span>
            <div class="item-right">
                <span class="add"></span>
                <span class="number">1</span>
                <span class="minus"></span>
            </div>
        </li>
        <li class="body-item">
            <span class="item-left">填空:</span>
            <div class="item-right">
                <span class="add"></span>
                <span class="number">1</span>
                <span class="minus"></span>
            </div>
        </li>
        <li class="body-item">
            <span class="item-left">主觀:</span>
            <div class="item-right">
                <span class="add" id="add"></span>
                <span class="number" id="number">1</span>
                <span class="minus" id="minus"></span>
            </div>
        </li>
        <li class="body-item">
            <span class="item-left">難度:</span>
            <select class="item-right" name="" id="">
                <option value="容易">容易</option>
            </select>
        </li>
    </ul>
    <div class="arrange-footer">
        <div class="footer-top">
            <div class="top-left">
                <span class="left-img"></span>
                <span class="left-text">未布置作業(yè)</span>
            </div>
            <div class="top-right"><span>題型配置</span></div>
        </div>
        <div class="footer-button app-button">生成作業(yè)</div>
    </div>
</section>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function(){
        var add = $('.app-homework-arrange .arrange-body .body-item .item-right .add');
        var minus = $('.app-homework-arrange .arrange-body .body-item .item-right .minus');
        
//        封裝前
//        add.each(function(){
//            $(this).click(function(){
//                var number = Number($(this).siblings('.number').html());
//                number++;
//                $(this).siblings('.number').html(number);
//            })
//        })
//        minus.each(function(){
//            $(this).click(function(){
//                var number = Number($(this).siblings('.number').html());
//                if(number <=1){
//                    return number =1;
//                }
//                number--;
//                $(this).siblings('.number').html(number);
//            })
//        })
        
//        封裝后
        function addMinus(obj,target){
            obj.each(function(){
                $(this).click(function(){
                    var number = Number($(this).siblings('.number').html());
                    number+=target;
                    if(target == -1 && number <= 0){
                        return number = 1;
                    }
                    $(this).siblings('.number').html(number);
                })
            })
        }
        addMinus($('.add'),1);
        addMinus($('.minus'),-1);
    })
</script>
</body>
</html>
回答
編輯回答
心夠野

1 dom元素的id屬性表示唯一性
2 使用事件代理機(jī)制

$('.arrange-body').on("click",".item-right",function(event){
    var number=parseInt($(this).find('.number').text(),10);
    var plus=0;
   if($(event.target).hasClass("add")){
       plus=1;
   }else if($(event.target).hasClass("minus")){
       //執(zhí)行減
       plus=-1;
   }
   $(this).find('.number').text(number+plus);
});
2017年3月12日 04:04
編輯回答
不舍棄

jq加事件不用each,多此一舉

function addMinus(option) {
    // 上下限
    option.max == option.max || Infinity;
    option.min == option.min || -Infinity;
    $(option.el).click(function(){
        // 緩存number元素
        var elnumber = $(this).siblings('.number');
        var number = Number(elnumber.html());
        // 判斷上下限
        if (number > option.min || number < option.max) {
            number += option.target;
        }
        // 回調(diào) 到達(dá)最大限度或最小先提醒一下用戶
        option.callback && option.callback.call(this,number, option);
        elnumber.html(number);
    })
}
addMinus({
    el: ".add",
    target: 1,
    max: 5,
    callback: function (number, option) {
        if (number >= option.max) {
            alert("超出最大限")
        }
    }
});
addMinus({ el: ".minus", target: -1 });
2018年2月16日 06:08
編輯回答
空痕

我覺(jué)得jQuery代碼不管怎么寫(xiě)，看上去都不會(huì)很優(yōu)雅。

能做的就是盡量規(guī)范代碼，然后加上注釋?zhuān)@樣就行了，當(dāng)然你也可以自己封裝插件。

var addNumberHandler = () => {...}
var minusNumberHandler = () => {...}

$('點(diǎn)擊add按鈕的選擇器').click(addNumberHandler);   // 點(diǎn)擊“+”
$('點(diǎn)擊minus按鈕的選擇器').click(minusNumberhandler); // 點(diǎn)擊“-”
2018年6月3日 01:41
編輯回答
負(fù)我心

拋開(kāi)其它的不說(shuō)，單你封裝那個(gè)函數(shù)就可以簡(jiǎn)化兩三行：

function addMinus(obj, target) {
    obj.each(function() {
        $(this).click(function() {
            var number = Number($(this).siblings('.number').html());
            number = target == -1 && number <= 0 ? 1 : number + target;
            $(this).siblings('.number').html(number);
        })
    })
}
2018年8月16日 09:33