嘗試在jQuery中設置td的索引

Question

在為我的jQuery類創建圖塊交換益智游戲的過程中。 現在，我正在嘗試使用空白圖塊制作單擊的圖塊開關（之后我將弄清楚如何將其限制為相鄰的圖塊）。 我已經將兩個索引的索引存儲在新變量中，但是我不知道如何將變量分配為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坐標的地圖。 需要交換的是表格單元格的內部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

一種）

$('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);
});

是正確的方法。 因此，您的代碼似乎是正確的。 您確定在運行函數時所有imgage都存在嗎？ 您是否注意到您的選擇器在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 
    }
});

然后，您可以像這樣處理click事件：

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

要跟蹤空白圖塊，您可以簡單地將其數據索引分配給全局變量。