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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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="<{$style}>statics/images/yinlianzhifuicon.png">
            <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學習者快速成長!