如何利用事件委托給3個按鈕添加點擊事件，并彈出同一個但內(nèi)容不一樣的layer彈框？

圖片描述

如圖，給右邊3個話筒按鈕添加點擊事件，之前是給每個按鈕分別添加點擊事件可以，但是目前想用事件委托的方式添加，如何實現(xiàn)？
代碼如下：

<form action="" id="myform">
    <div class="box">
        <div class="num">
            <label for="">保單號</label>
            <input type="text" placeholder="請?zhí)顚懕翁?/>
        </div>
        <div class="num-btn">
            <span class="icon-one iconfont icon-qy-yy-h"></span>
        </div>
    </div>
    <div class="box">
        <div class="idcard">
            <label for="">身份證</label>
            <input type="text" placeholder="請輸入身份證號" autocomplete="off"/>
        </div>
        <div class="num-btn">
            <span class="icon-two iconfont icon-qy-yy-h"></span>
        </div>
    </div>
    <div class="box">
        <div class="bcard">
            <label for="">銀行卡</label>
            <input type="text" placeholder="請?zhí)顚戙y行卡號"/>
        </div>
        <div class="num-btn">
            <span class="icon-three iconfont icon-qy-yy-h"></span>
        </div>
    </div>
</form>

jquery代碼如下

   $(".icon-one").on("touchstart",function(){
        layer.open({
            title:'請說出保單號',
            shadeClose: false,
            style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
            content:$("#saying").html(),
            btn:['確認'],
            yes:function(index){
              layer.close(index)
          },
        })
            
     });

    $(".icon-two").on("touchstart",function(){
        layer.open({
            title:'請說出身份證號',
            shadeClose: false,
            style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
            content:$("#saying").html(),
            btn:'確認提交',
            yes:function(index){
                  layer.close(index)
            },
        })
    });

事件委托方式，給父元素添加點擊事件，因為要彈出不同的layer內(nèi)容，所以if做判斷，但是不對,求解？

$(".num-btn").on("touchstart","span",function(){
        if($(".icon-one")){
            layer.open({
                title:'請說出保單號',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:['確認'],
                yes:function(index){
                  layer.close(index)
              },
            })
        }else if($(".icon-two")){
            layer.open({
                title:'請說出身份證號',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:'確認提交',
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})

回答

編輯回答

來守候

具體邏輯沒看，但if($(".icon-one"))這種寫法肯定是不對的，因為$(".icon-one")返回的是個jQ對象，自動轉(zhuǎn)換為true，這樣上邊的分支實際就變成常通了。
這種一般是要在事件回調(diào)中用到$(this)，這個是jQ對e.target的一個封裝(相當于$(e.target))，它返回的是jQ封裝的事件被觸發(fā)的那個DOM對象，而判斷是否包含一個類，則可以用.is()這個API。簡而言之，寫成if ( $(this).children().is(".icon-one") )吧。

2017年7月24日 19:23

編輯回答

心上人

判斷事件觸發(fā)的元素上的class是否為指定的class
在你代碼的這個地方
if($(".icon-one")){

2017年1月30日 09:47

編輯回答

大濕胸

判斷條件改為：

if($(this).children('span')===$('.icon-one')){
    ...
}

2017年10月26日 10:15

編輯回答

久舊酒

隨便寫一個吧。也不知道這樣是不是你的意思：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button class="button A">button A</button>
<button class="button B">button B</button>
<button class="button C">button C</button>

<script src="jquery.js"></script>
<script>
    $('body').on('click', '.button', function () {
        var _this = $(this);
        if (_this.hasClass('A')) {
            alert('click A');
        } else if (_this.hasClass('B')) {
            alert('click B');
        } else if (_this.hasClass('C')) {
            alert('click C');
        }
    });

</script>

</body>
</html>

2017年11月3日 16:31

編輯回答

純妹

$(".num-btn").on("touchstart","span",function(event){
        var target = $(event.target);
        if(target.hasClass("icon-one")){
            layer.open({
                title:'請說出保單號',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:['確認'],
                yes:function(index){
                  layer.close(index)
              },
            })
        }else if(target.hasClass("icon-two")){
            layer.open({
                title:'請說出身份證號',
                shadeClose: false,
                style: 'width:5rem;border:none;background:linear-gradient(to right bottom,#f14f63,#7889fb);color:#fff;',
                content:$("#saying").html(),
                btn:'確認提交',
                yes:function(index){
                      layer.close(index)
                },
            })
        }
    
})

2018年8月8日 14:00