Jquery卡匹配游戏与图像，数字和名称

Question

我已设法将图像添加到此Jquery游戏，但我想将这些数字与相应的花名称（术语）匹配，即1 = Foxglove。当我在下面的代码中添加术语时，它会独立地放大术语和数字，导致每张卡的名称错误，如下图所示。我也试过使用HTML，但它没有显示。请帮忙

<div id="content">

<div id="cardPile">
    <div class="ui-draggable" style="position: relative;" id="card2"><p 
 id="text-pop">Opium poppy</p></div>
    <div class="ui-draggable" style="position: relative;" id="card3">Sugar 
 pine</div>
    <div class="ui-draggable" style="position: relative;" 
  id="card1">Foxglove</div>
    <div class="ui-draggable" style="position: relative;" id="card5">Pacific 
 Yew</div>
<div class="ui-draggable" style="position: relative;" 
id="card4">willow</div>
 </div>

 <div id="cardSlots">
 </div>

 <div id="successMessage">
 <h2>You did it!</h2>
 <button onclick="init()">Play Again</button>
 </div>

 </div>



<script type="text/javascript">
var correctCards = 0;
$( init );
function init() {

 // Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );

// Reset the game
correctCards = 0;
$('#cardPile').html( '' );
$('#cardSlots').html( '' );

// Create the pile of shuffled cards
var numbers = ['1','2','3','4','5'];
terms = ['foglove', 'Opium poppy', 'Sugar pine','Willow', 'Pacific yew'];
numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<=5; i++ ) {
$('<div>' + terms[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 
'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
  containment: '#content',
  stack: '#cardPile div',
  cursor: 'move',
  revert: true
 } );
 }

 // Create the card slots
 var words = [ 'one', 'two', 'three', 'four', 'five' ];
 for ( var i=1; i<=5; i++ ) {
 $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( 
 '#cardSlots' ).droppable( {
  accept: '#cardPile div',
  hoverClass: 'hovered',
  drop: handleCardDrop
  } );
  }

 }

 function handleCardDrop( event, ui ) {
 var slotNumber = $(this).data( 'number' );
 var cardNumber = ui.draggable.data( 'number' );

 if ( slotNumber == cardNumber ) {
 ui.draggable.addClass( 'correct' );
 ui.draggable.draggable( 'disable' );
 $(this).droppable( 'disable' );
 ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
 ui.draggable.draggable( 'option', 'revert', false );
 correctCards++;
 } 

 if ( correctCards == 10 ) {
 $('#successMessage').show();
 $('#successMessage').animate( {
  left: '380px',
  top: '200px',
  width: '400px',
  height: '100px',
  opacity: 1
 } );
 }

 }
</script>

Answer 1

var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8];
var text = ['Willow','Opium Poppy','Foxglove','White Hellebore','Pacific Yew 
Tree', 'Sea Wormwood','Coneflower','Sugar Pine']    
numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<8; i++ ) {
$('<div>' + text[numbers[i]-1] + '</div>').data( 'number', numbers[i] 
).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}

我在这里找到答案http://spolearninglab.com/curriculum/SEP/2015/unit_01/drag_and_drop.html希望它可以帮助其他人。