JavaScript拖拽配对游戏问题：如何仅为指定元素触发自定义函数

我来帮你搞定这个问题，咱们一步步梳理：

首先修正拼写错误 #

你提到的slodNumber是笔误，要统一写成slotNumber，好在你当前的handleCardDrop函数里已经用对了这个变量名，只要确保所有用到槽位编号的地方都用正确的名称就行。

精准触发指定配对的自定义函数 #

你之前的问题是函数作用到了所有元素，核心原因是没有给自定义函数加上专属的判断条件。咱们只需要在卡片和槽位匹配的逻辑里，额外判断当前配对是不是你指定的「数字2卡片→two槽位」这一组，再执行自定义函数就可以了。

修改后的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];
  var terms = ["1", "2", "3", "4", "5"];
  //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({
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    });
  }
  // Create the card slots
  var words = ["one", "two", "three", "four", "five"];
  for (var j = 1; j <= 5; j++) {
    $('<div>' + words[j - 1] + '</div>').data('number', j).appendTo('#cardSlots').droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  }
}

// 自定义函数：你可以在这里写你想要执行的逻辑
function myCustomFunction() {
  alert("卡片2成功配对到two槽位啦！");
  // 比如修改页面样式、播放音效、发送请求等都可以在这里加
}

function handleCardDrop(event, ui) {
  var slotNumber = $(this).data('number');
  var cardNumber = ui.draggable.data('number');
  
  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again
  if (slotNumber == cardNumber) {
    ui.draggable.position({
      of: $(this),
      my: 'left top',
      at: 'left top'
    });
    ui.draggable.draggable('option', 'revert', false);
    correctCards++;

    // 重点：只有当配对的是数字2的卡片和对应的槽位时，执行自定义函数
    if (cardNumber === 2) {
      myCustomFunction();
    }
  }
  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go
  if (correctCards == 5) {
    $('#successMessage').show();
    $('#successMessage').animate({
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    });
  }
}

关键修改说明 #

1. 新增了myCustomFunction，你可以在这个函数里写任何你想要执行的自定义逻辑，比如弹窗提示、修改页面元素、播放音频等等。
2. 在handleCardDrop的匹配成功逻辑中，增加了if (cardNumber === 2)的判断——因为数字2的卡片对应cardNumber=2，而"two"槽位的slotNumber=2，所以当这组配对成功时，才会调用自定义函数，完全不会影响其他卡片的配对逻辑。

这样就完美解决了你遇到的两个问题：既修正了拼写错误，又实现了只有指定配对组触发自定义函数的需求。

内容的提问来源于stack exchange，提问作者Nurbanu Kol