Question

这段代码有什么问题

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



  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++;
  }

它假设要比较来自2个不同阵列的2个字符串，然后在插槽上放下正确的字母，但它会丢弃像B上的A这样的所有内容

这里是数组的代码

var numbers = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j' ];
  numbers.sort( function() { return Math.random() - .5 } );


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

这是针对droppable元素的

 var words = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'  ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'string', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

这最初用于数字，它比较了两个数字并在正确的插槽上放下正确的数字，但我需要字母，有人可以告诉我它有什么问题吗？请！

Answer 1

你的Words元素没有将字符串放入data('string')，它们在循环中得到数字。

此外，数字数组比用于为那些设置data('string')的索引更短，因为数组从零开始而不是1

在数字循环更改中：

data( 'string', numbers[i] )

到

data( 'string', numbers[i-1] )

单词循环更改

.data( 'string', i )

要

.data( 'string', words[i-1] )

更重要的是学习如何调试这样的事情

一些简单的console.log(variableName)语句可以帮助您了解为什么事情无法正确比较。通过学习一些关于调试javascript的教程来节省你自己的时间

或者投入debugger语句并检查每个步骤中的值会有所帮助

比较jquery中的两个字符串

1 个答案: