使用id为+；在jQuery中查找它们的数字

具有如下html代码：

<table>
    <tr>
        <td bgcolor=yellow>LED #1</td>
        <td id=led0 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #2</td>
        <td id=led1 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #3</td>
        <td id=led2 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #4</td>
        <td id=led3 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td>
            <button>number 1</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 2</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 3</button>
        </td>
    </tr>
</table>

$('button').click(function() {
  var index = $("button").index(this);   
 // alert(index);
  $("#led[index]").html('<div style="background:#cccccc" >OFF</div>');

  
});

发光二极管#1
在…上
发光二极管#2
在…上
发光二极管#3
在…上
发光二极管#4
在…上
第一
二号
三号

我想实现这样的目标：

<table>
    <tr>
        <td bgcolor=yellow>LED #1</td>
        <td id=led0 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #2</td>
        <td id=led1 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #3</td>
        <td id=led2 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td bgcolor=yellow>LED #4</td>
        <td id=led3 bgcolor=red>ON</td>
    </tr>
    <tr>
        <td>
            <button>number 1</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 2</button>
        </td>
    </tr>
    <tr>
        <td>
            <button>number 3</button>
        </td>
    </tr>
</table>

$('button').click(function() {
  var index = $("button").index(this);   
 // alert(index);
  $("#led[index]").html('<div style="background:#cccccc" >OFF</div>');

  
});

$（“按钮”）。单击（函数（）{
var索引=$（“按钮”）.index（本）；
//警报（索引）；
$（“#led[index]”）html（'OFF'）；
});

换句话说：我想检测按下的按钮（该按钮已在工作），然后使用

id=“led[index]”

修改td元素的html代码，并使用变量

“index”

查找正确的led编号

---

有什么想法吗？

您可能想使用

$（this.attr（“id”）

然后将索引连接到

#led

id

        $('button').click(function() {
          var index = $(this).attr("id");
          $("#led" + index).html('<div id="led'+index+'" style="background:red" >ON</div>');

        // code
    });

$（“按钮”）。单击（函数（）{
var索引=$（this.attr（“id”）；
$（“#led”+index）.html（'ON'）；
//代码
});

HTML:

---

您可能希望使用

$（this.attr（“id”）

然后将索引连接到

#led

id

        $('button').click(function() {
          var index = $(this).attr("id");
          $("#led" + index).html('<div id="led'+index+'" style="background:red" >ON</div>');

        // code
    });

$（“按钮”）。单击（函数（）{
var索引=$（this.attr（“id”）；
$（“#led”+index）.html（'ON'）；
//代码
});

HTML:

---

按以下方式取消：

$("#led" + index);

---

按以下方式取消：

$("#led" + index);

---

您需要对代码进行两次编辑：

首先，您需要使用

attr（'id'）

方法来获取索引

其次，需要将索引连接到jQuery选择器上

$('button').click(function() {
    var index = $(this).attr('id');   
    $("#led"+index).html('<div id="led'+index+'" style="background:red" >ON</div>');
});

$（“按钮”）。单击（函数（）{
var index=$（this.attr（'id'）；
$（“#led”+index）.html（'ON'）；
});

您需要对代码进行两次编辑：

首先，您需要使用

attr（'id'）

方法来获取索引

其次，需要将索引连接到jQuery选择器上

$('button').click(function() {
    var index = $(this).attr('id');   
    $("#led"+index).html('<div id="led'+index+'" style="background:red" >ON</div>');
});

$（“按钮”）。单击（函数（）{
var index=$（this.attr（'id'）；
$（“#led”+index）.html（'ON'）；
});

我更进一步，这样你就可以打开

或关闭
。您的主要问题是没有连接
索引
，应该像这样执行
+索引+
。我使用了以下jQuery代码：

$('button').click(function() {
var index = $("button").index(this);   
// alert(index);
  // You must concatenate index with "+"
  if ($("#led"+index+":contains('ON')").length > 0)
    $("#led"+index).html("OFF").css("background-color", "red");
  else if ($("#led"+index+":contains('OFF')").length > 0)
    $("#led"+index).html("ON").css("background-color", "green");
});

我还做了一个工作，这样你就可以看到它的工作

你可以在
打开
或
关闭
更改的地方放置任何你想要的HTML。
我更进一步，这样你就可以切换
打开
或
关闭
。您的主要问题是没有连接
索引
，应该像这样执行
+索引+
。我使用了以下jQuery代码：

$('button').click(function() {
var index = $("button").index(this);   
// alert(index);
  // You must concatenate index with "+"
  if ($("#led"+index+":contains('ON')").length > 0)
    $("#led"+index).html("OFF").css("background-color", "red");
  else if ($("#led"+index+":contains('OFF')").length > 0)
    $("#led"+index).html("ON").css("background-color", "green");
});

我还做了一个工作，这样你就可以看到它的工作

您可以将所需的任何HTML放在
打开
或
关闭
更改的位置