遞增事件偵聽器的事件監聽到一個特定的ID（卡1，卡2，卡-3等）

Question

問題

我建立一個幻燈片。當我移動到下一個幻燈片我增加我的卡ID是這樣的：

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

我也有另一對KEYUP聽衆......我想觸發功能，當有人進入文本輸入字段與類「空白輸入「，輸入在帶有卡片ID（卡-1，卡-2，卡-3等）的div內。

我的代碼：

標記（我通過我的卡循環從數據庫）

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

更改ID，以一類，請從環事件：

$('.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將無法正常工作，請爲其選擇不同的選擇器