尝试在 jQuery 中设置 td 的索引

Question

正在为我的 jQuery class 创建拼图交换益智游戏。现在我正在努力尝试用空白图块切换点击的图块（之后我会弄清楚如何将它限制在相邻的图块上）。我已经将两个索引的索引存储在新变量中，但我无法弄清楚如何将变量分配为 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;等。我似乎无法弄清楚如何用新索引覆盖。

编辑：
好吧，我已经看到了我（尝试的）索引交换方式的邪恶！仍在研究解决方案，但我正在改变轨道并专注于按照 Starscream1984 的建议更改 src。弄明白了再更新，谢谢大家！

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

$(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 坐标的地图。需要交换的是 table 单元格的内部 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);
});

是正确的方法。所以你的代码似乎是正确的。您确定在您运行函数时所有图像都存在吗？您是否注意到您的选择器在 DOM 中找到了 all 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 的索引

Trying to Set the Index of a td in jQuery

javascript

jquery

html-table