递增事件侦听器事件以侦听特定id (card-1、card-2、card-3等)

Question

问题

我正在制作幻灯片。当我移动到下一张幻灯片时，我会像这样增加我的卡片id：

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

我还有另一个键盘听者..。我想要触发一个函数，当有人用类“空白-输入”将文本输入到输入字段时，该输入在带有卡片id的div内( card -1、card-2、card-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的追加将无法工作，请为其选择一个不同的选择器。