php - jQuery在id选择器中连接int和string

Question

我有一堆这样命名的表格单元格：

for($x=0;$x<20;$x++){
            echo "<td id='td"; echo $x; echo "'>";
                        //put some text in the cell...
                    echo "</td>";

}

即每个单元格的 id 是 td0,td1,td2... 表格看起来不错。现在我想用 jQuery 让它可点击（按单元格）。

我尝试作为测试用例：

$("#td0").click(function(){        
  $(this).css("background-color","yellow");
  //do some other stuff...

});

这工作得很好。第一个单元格是可点击的。现在我想使用 for 循环使每个单元格都可以点击：

for(i=0;i<20;i++){
    cell = "#td"+i;
    $(cell).click(function(){
                 //stuff...
        });
}

这不适用于任何单元格。我不确定为什么，或者如何解决它。任何帮助表示赞赏。

编辑

抱歉，我应该提到，功能会因单元格的不同而有所不同（例如，单击 td0 与单击 td8 会有非常不同的动作），所以我不能只使用通用的“td”，我不认为。

Answer 1

$('td[id^="td"]').click(function() { ... })

编辑：小提琴。

编辑（问题略有改变）：新小提琴。

$('td[id^="td"]').click(function() {
    var tdVal = $(this).attr('id').replace('td', '');
    switch (tdVal) { ... }
})

我认为您最好使用 data-* 属性来表示值，但是：

<td class="myTableCell" data-value="0"></td>
<td class="myTableCell" data-value="1"></td>

$('td.myTableCell').click(function() {
    var tdVal = $(this).attr('data-value');
    ...
})

编辑：最终小提琴。

...并使用 PHP（无需多次使用 echo）：

for($x=0;$x<20;$x++){
        echo "<td id='td' data-value='" . $x . "'>";
                    //put some text in the cell...
                echo "</td>";
}

Answer 2

解决它的最便宜的方法是添加一个类并且只使用 1 个绑定函数。

for($x=0;$x<20;$x++){
        echo "<td class='table-cell' id='td" . $x . "'>";

        //put some text in the cell...
        echo "</td>";

}

现在将其绑定到 click 并检查 clicked 的 id

$(".table-cell").click(function(e){        
    $(e.target.id).css("background-color","yellow");
    //do some other stuff...

});

或者您可以在绑定中使用开关

$(".table-cell").click(function(e){        

    switch(e.target.id)
    {
    case 1:
      //execute code block 1
      break;
    case 2:
      //execute code block 2
      break;
    default:
      //code to be executed for default
    }

});

Answer 3

$('td[id^="td"]').click(function(){        
  $(this).css("background-color","yellow");
  //do some other stuff...

});