Question

在为我的jQuery类创建tile-swap益智游戏的过程中。现在我正在努力尝试用空白图块制作点击的图块切换（我将弄清楚如何将其限制在相邻的图块之后）。我在新变量中存储了两个索引的索引，但我无法弄清楚如何将变量赋值为td元素索引。

$(document).ready(function(){

$('img').click(function(){
    var tileSelected = $(this);            //grab the clicked tiles index
    var tileIndexOld = $("img").index(tileSelected);

    var blankTile = $("#blank");             //grab the blank tiles index
    var blankIndexOld = $("img").index(blankTile);

    var tileIndexNew = blankIndexOld;       //swap tile and blank indexes
    var blankIndexNew = tileIndexOld;

    $(this).attr("index", tileIndexNew);
    $("#blank").attr("index", blankIndexNew);
});
});

我也尝试过像$（tileSelected）.index（tileIndexNew）;和$（this）.index（）= tileIndexNew;我似乎无法弄清楚如何用新索引覆盖。

编辑：
好吧，我已经看到了我（尝试过的）索引交换方式的邪恶！仍然致力于解决方案，但我正在改变轨道，并专注于改变星球大战1984所建议的src＆s。一旦我弄清楚了，我会再次更新，非常感谢所有人！

解决方案：
在尝试了三种不同的方式（有多个子变体）后，这就是我最终的结果：

$(document).ready(function(){

$("td").click( function(){

    var tileVertical = $(this).index();                 //get clicked tiles vertical position via its td
    var tileHorizontal = $(this).parent().index();      //get clicked tiles horizontal position via its tr

    var blankTile = $("#blank").parent();               //getting the td that contains the blank tile
    var blankVertical = blankTile.index();              //get blank tiles vertical position (via its td)
    var blankHorizontal = blankTile.parent().index();       //get blank tiles horizontal position via its tr

    if( Math.abs(blankVertical - tileVertical) + Math.abs(blankHorizontal - tileHorizontal) == 1)   //check if clicked tile is adjacent to the blank tile
        {
        blankTile.empty().html( $(this).html() );       //put the tile html into the blank slot
        $(this).html("<img id='blank' src='blank.jpeg' width='200px' />");          //fill the tile slot with the blank, ID IS CRITICAL!!!!
        }                                                                           //function will only run once if id is omitted from this tag!!!

    return 1;
});
});

我原来的方法试图将索引用作换出的快速和脏变量。我发现的是，在这种情况下，索引更像是一个带有x和y坐标的地图。这是表格单元格的内部html需要交换，而不是索引本身。

Answer 1

您需要使用jQuery DOM修改方法移动元素。此解决方案假定每个图块都包含在网格中的DIV中。

$('img').click(function(){
    var tileSelected = $(this);
    var parentSelected = tileSelected.parent();
    var blankTile = $("#blank");
    var blankParent = blankTile.parent();

    parentSelected.append(blankTile);
    blankParent.append(tileSelected);
});

Answer 2

A）

$('img').each(function(index, elem){
  console.log(index);
});

B）

$('img').click(function(){
  var index = $(this).index();
  //or
  //var index = $('img').index($(this));
  console.log(index);
});

是正确的方法。所以你的代码似乎是正确的。您确定在运行该功能时所有的imgages都存在吗？您是否注意到您的选择器在DOM中找到所有 img？

Answer 3

如果你想为td分配一个索引变量，可以采用以下方法进行以下操作：

$(document).ready(function(){
    var tdArray = $("td");//grabs all td elements

    for(i = 0; i < tdArray.length; i++){
        $(tdArray[i]).attr('data-index',i);//adds a data-index attribute on each one 
    }
});

然后您可以像这样处理点击事件：

 $("td").click(function(){
        alert($(this).attr('data-index'));
 });

要跟踪空白磁贴，您可以简单地将其数据索引分配给全局变量。

试图在jQuery中设置td的索引

3 个答案: