javascript - 반복되는 바인딩 이벤트를 처리하는 방법은 무엇입니까?-PHP 튜토리얼-php.cn

javascript - 반복되는 바인딩 이벤트를 처리하는 방법은 무엇입니까?

WBOY

풀어 주다： 2023-03-01 18:16:01

원래의

1267명이 탐색했습니다.

javascript - 반복되는 바인딩 이벤트를 처리하는 방법은 무엇입니까?
바인딩 해제 팝업창은 공개됩니다. 확인 및 취소를 클릭하면

의 바인딩 해제(해당 은행 카드 돔 제거) 작업이 해당 은행 카드

에서 클릭되었는지 어떻게 알 수 있나요?

<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><!-- 银行卡列表 -->
    <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">처럼 은행 카드 일련번호를 바인딩할 수 있습니다. 사용자가 확인을 클릭하면 맨 위로 이동하여 확인할 수 있습니다.

event.target 또는 event.currentTarget을 통해 DOM
JavaScript 이벤트 개체

를 가져옵니다.

현재 운용중인 카드를 변수로 저장합니다.

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

로그인 후 복사

바인딩 해제를 클릭하면 상위 요소를 가져온 다음 관련 작업을 통해 상위 요소를 삭제하여 목표를 달성할 수 있습니다.

구별 가능한 데이터 ID 바인딩 해제 및 추가

고유 식별자 바인딩