javascript - Wie gehe ich mit wiederholten Bindungsereignissen um?-PHP-Tutorial-php.cn

javascript - Wie gehe ich mit wiederholten Bindungsereignissen um?

WBOY

Freigeben： 2023-03-01 18:16:01

Original

1267 Leute haben es durchsucht

javascript - Wie gehe ich mit wiederholten Bindungsereignissen um?
Das Popup-Fenster zum Aufheben der Bindung ist öffentlich. Woher weiß ich, wenn ich auf „Bestätigen und Abbrechen“ klicke, dass der Entbindungsvorgang (entsprechende Entfernung des Bankkartendoms) von

auf der entsprechenden Bankkarte

angeklickt wird

<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>

Nach dem Login kopieren

Antwortinhalt:

angeklickt wird

<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>

Nach dem Login kopieren

<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>

Nach dem Login kopieren

Wenn möglich, hoffe ich, es zu übernehmen

Es ist ganz einfach. Wenn der Benutzer zum Aufheben der Bindung klickt, können Sie die Informationen darüber, auf welche Bankkarte der Benutzer geklickt hat, mit den Eigenschaften der Popup-Box-Beschriftung verknüpfen. Sie können beispielsweise die Seriennummer der Bankkarte daran binden, so <div class="unbind-confirm" data-bankIndex="1">. Wenn der Benutzer zur Bestätigung klickt, können Sie einfach nach oben gehen, um es abzurufen.

Rufen Sie das event.targetevent.currentTargetJavaScript-EreignisobjektDOM über
oder

Verwenden Sie eine Variable, um die aktuell betriebene Karte zu speichern.

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

Nach dem Login kopieren

Wenn Sie auf „Binden aufheben“ klicken, können Sie das übergeordnete Element abrufen und es dann durch entsprechende Vorgänge löschen, um Ihr Ziel zu erreichen.

Entbinden Sie die Verbindung und fügen Sie eine unterscheidbare Daten-ID hinzu

Binden Sie eine eindeutige Kennung