0

有这样的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>');

  
});

用文字来说：我想检测按下的按钮（它已经在工作），然后使用变量修改 td 元素的 html 代码，id="led[index]"并使用变量"index"来找到正确的 LED 编号。

任何的想法？

4

4 回答 4

2

连接方式如下：

$("#led" + index);
于 2013-03-27T23:33:18.717 回答
1

我更进一步并做到了，以便您可以切换ON或OFF。您的主要问题是您没有连接index，应该这样做+ index +。我使用了以下 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");
});

我还制作了一个有效的JSFiddle，以便您可以看到它的工作原理。

您可以将所需的任何 HTML 放在更改ONor的位置。OFF

于 2013-03-28T00:00:34.897 回答
0

您会想要使用$(this).attr("id");然后将索引连接到#ledid

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

        // code
    });

HTML：

<button id="someID">
于 2013-03-27T23:32:12.517 回答
0

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

首先，您需要使用attr('id')方法来获取索引。

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

$('button').click(function() {
    var index = $(this).attr('id');   
    $("#led"+index).html('<div id="led'+index+'" style="background:red" >ON</div>');
});
于 2013-03-27T23:35:07.860 回答