javascript - 重复绑定事件的处理方式?

WBOY
发布: 2023-03-01 18:16:01
原创
1228 人浏览过

javascript - 重复绑定事件的处理方式?
解绑的弹窗是公共的。在点击确认和取消的时候我怎么知道是
javascript - 重复绑定事件的处理方式?
对应的银行卡点击的解绑(对应的银行卡dom移除)操作

<code><!-- 银行卡列表 -->
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>

<!-- 解绑成功 -->
<div class="unbind-confirm">
    <p>确定解绑该银行卡吗?</p>
    <hr>
    <div class="unbind-option clearfix">
        <div class="unbind-cancel">取消</div>
        <div class="unbind-sure">确认</div>
    </div>
</div></code>
登录后复制
登录后复制

回复内容:

javascript - 重复绑定事件的处理方式?
解绑的弹窗是公共的。在点击确认和取消的时候我怎么知道是
javascript - 重复绑定事件的处理方式?
对应的银行卡点击的解绑(对应的银行卡dom移除)操作

<code><!-- 银行卡列表 -->
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>
    <div class="bankcard-block">
        <div class="bankcard-item">
            <img  class="card-img" src="<%7B%24style%7D>statics/images/yinlianzhifuicon.png" alt="javascript - 重复绑定事件的处理方式?" >
            <div class="card-info">
                <p class="card-name">建设银行</p>
                <p class="card-type">储蓄卡</p>
                <p class="card-number">****  ****  **** <label>6535</label></p>
            </div>
            <div class="ubind-card">解绑</div>
        </div>
    </div>

<!-- 解绑成功 -->
<div class="unbind-confirm">
    <p>确定解绑该银行卡吗?</p>
    <hr>
    <div class="unbind-option clearfix">
        <div class="unbind-cancel">取消</div>
        <div class="unbind-sure">确认</div>
    </div>
</div></code>
登录后复制
登录后复制

<code>用 jquery 的 方式
$('.ubind-card').click(function(){
    //的到当前银行卡列表的下标
    var ubindIndex = $(this).parents('.bankcard-block').index();
    //给确定按钮赋一个标识
    $('.unbind-sure').attr('val',ubindIndex ).show();
});
$('.unbind-sure').click(function(){
    var index = $(this).attr('val');
    $('.bankcard-block:eq('+index+')').remove();
});
</code>
登录后复制

如果可以的话望采纳

很简单呀,当用户点击解绑的时候,你可以把用户点击的是哪张银行卡的信息绑定在弹出框标签的属性上。比如你可以把银行卡的序号绑定在上面,像这样<div class="unbind-confirm" data-bankindex="1">。用户点击确认的时候你再到上面去取就好了。 <p class="answer fmt" data-id="1020000007619770"> </p> <p>通过<code>event.targetevent.currentTarget获取DOM
JavaScript事件对象

用一个变量来保存当前操作的卡。

<code class="javascript">var currentCart = -1;//默认-1
$('#cards').on('click','.btnJieBang',function(){
currentCart=this.dataset.cartid;
});
//弹窗确定的事件里,去读取currentCart变量即可</code>
登录后复制

点击解绑的时候,你不就可以得到他的父元素了,然后通过相关操作删除父元素,就能达到目的。

解绑上加个能区分开的data-id

绑定一个唯一标示

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!