Question

我正在尝试实施一个简单的拖放游戏，让您将图像与正确的身体部位相匹配。

到目前为止，在开源的帮助下，我已经能够实现数字和文本，但是不是数字'1,2,3,4,5,6“我希望这些是框中的图像，那将是可拖动的文本。

下面是用于创建数字的变量，我想知道如何将数字更改为图像？

var numbers = [ 1, 2, 3, 4, 5, 6 ];
numbers.sort( function() { return Math.random() - .5 } );

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

我还附上Live Link 让你更好地理解。

由于

Answer 1

var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ '/images/1.gif','/images/2.gif','/images/3.gif','/images/4.gif','/images/5.gif','/images/6.gif' ];

numbers.sort( function() { return Math.random() - .5 } );

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

有很多方法可以使用imgs数组，但这只是一个例子。

Answer 2

我认为你可以为所有div设置css背景图像属性

    var numbers = [ 1, 2, 3, 4, 5, 6 ];
    numbers.sort( function() { return Math.random() - .5 } );

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

你需要在同一文件夹中有1.png，2.png，3.png，4.png，5.png。

jQuery拖放 - 如何将图像添加到变量中

2 个答案: