ID爲+號使用HTML標記找到他們的jQuery

Question

有一個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>'); 


}); 

在的話：我想檢測按下的按鈕（它已經工作），然後用id="led[index]"修改td元素的html代碼，並使用變量"index"找到正確的led數。

有什麼想法？

Answer 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，這樣你可以看到它的工作。

您可以在ON或OFF更改的位置放置任何HTML。

Answer 2

您可能需要使用$(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 
    }); 

HTML：

<button id="someID"> 

Answer 3

Cancatenate方式如下：

$("#led" + index); 

Answer 4

您需要對您的代碼進行兩次編輯：

首先，您需要使用attr('id')方法來獲取索引。其次，您需要將索引連接到您的jQuery選擇器上。

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