javascript - 增加事件监听器事件以监听特定 ID(card-1、card-2、card-3 等...)

Question

问题

我正在制作幻灯片。当我转到下一张幻灯片时，我会增加我的卡 ID，如下所示:

cardId++;
$('#card-' + (cardId)).show();

我还有另一个 on keyup 监听器...当有人在带有“blank-input”类的输入字段中输入文本时，我想触发一个函数，其中该输入位于带有卡 id 的 div 中(card-1，卡-2、卡-3 等...)。

我的代码:

标记(我正在从数据库循环访问我的卡片)

<!-- lesson cards -->
<?php $card_id = 2; ?>
<?php foreach ($cards as $card) : ?>
<div id="card-<?php echo $card_id; ?>" class="container-fluid card-container" style="background:#eaeaec;display:none;">

    <span id="cardId" class="animated fadeInDown"><?php echo $card_id; ?></span>

    <!-- card template one -->
    <div class="container">
        <div class="col-xs-6 animated fadeInLeft" id="leftContent-<?php echo $card_id; ?>">
            <h2>
                <?php echo $card->card_name; ?>
                <i class="fa fa-volume-up"></i>
            </h2>
            <?php echo htmlspecialchars_decode($card->card_html); ?>
        </div>
        <div class="col-xs-6 animated fadeInRight" id="rightContent-<?php echo $card_id; ?>">
            <img src="<?php echo base_url($card->file_path); ?>" alt="">
        </div>
    </div>
    <!-- end card template one -->

</div>
<?php $card_id++; ?>
<?php endforeach; ?>
<!-- end lesson cards -->

我的脚本

$(function(){

    if (window.location.hash == '') {
        var cardId = 1;
    } else {
        var cardId = parseInt(window.location.hash.substring(1));
    }

    showCard(); // first thing that is run

    /**
     * first function to run
     */
    function showCard(){
        $('#card-' + (cardId)).show();
    }

    $('#nextCard').click(function(){
        if ($('#card-' + (cardId + 1)).length != 0) {  // if there is a next card
            $('#card-' + (cardId)).hide();             // hide current card
            cardId++;                                  // increment the card id
            $('#card-' + (cardId)).show();             // and show the next card
            location.hash = cardId;
        }
    });

    $('#previousCard').click(function(){
        if (cardId != 1) {                 // if we are not at the first card
            $('#card-' + (cardId)).hide(); // hide the current card
            cardId--;                      // decrement the card id
            $('#card-' + (cardId)).show(); // and show the previous card
            location.hash = cardId;
        }
    });

    /**
     * fill in the blank
     */
    blanks = document.getElementsByClassName('blank');
    for(i = 0; i < blanks.length; i++){
        $(blanks[i]).html(
            '<input class="blank-input" data="' + $(blanks[i]).html()  + '"></input>'
        );
    }
    $('#card-' + (cardId)).on('keyup', '.blank-input', function(){
        this.style.width = ((this.value.length + 1) * 12) + 'px';
        if ($(this).val() == $(this).attr('data')) {
            $(this).removeClass('blank-incorrect').addClass('blank-correct animated tada');
        } else {
            $(this).removeClass('blank-correct').addClass('blank-incorrect');
        }
    });    
});

问题:

如何更新“keyup”事件监听器以监听显示的 id 中的输入，例如卡-1、卡-2 等...

Answer 1

将 ids 更改为类，从循环中删除事件:

$('.card-container').on('keyup', '.blank-input', function(){
        this.style.width = ((this.value.length + 1) * 12) + 'px';
        if ($(this).val() == $(this).attr('data')) {
            $(this).removeClass('blank-incorrect').addClass('blank-correct animated tada');
        } else {
            $(this).removeClass('blank-correct').addClass('blank-incorrect');
        }
    });    

注意:所提供的 html 中不存在空白类，因此附加 html 将不起作用，请为其选择不同的选择器