呼叫取決於gridview的行

Question

嗨，我有

<script type="text/javascript"> 
function changeImage() { 
    var image = document.getElementById('myImage'); 
    if (image.src.match("bulbon")) { 
     image.src = "Images/pic_bulboff.gif"; 
    } else { 
     image.src = "Images/pic_bulbon.gif"; 
    } 
} 

<asp:GridView Width="100%" ID="GridView1" DataSourceID="SqlDataSource1" DataKeyNames="ID" AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"> 
    <AlternatingRowStyle BackColor="White" /> 
    <Columns> 
     <asp:TemplateField HeaderText="ID"> 
      <ItemTemplate> 
       <asp:Label ID="lbl1" runat="server" Text='<%#Eval("ID") %>' /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Name"> 
      <ItemTemplate> 
       <%#Eval("Name") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Desc"> 
      <ItemTemplate> 
       <%#Eval("Desc") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="On Off"> 
      <ItemTemplate> 
       <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" /> 
      </ItemTemplate> 
     </asp:TemplateField> 

而產生的gridview的一個javascript & GridView的代碼將有大約4行，我點擊每一次Java腳本函數不在第一排的圖像只會觸發第一排

有關如何解決此問題的任何建議？

Answer 1

Try this 

<img id="myImage" onclick="changeImage(this)" src="pic_bulboff.gif" /> 

<script type="text/javascript"> 
    function changeImage(image) { 
     if (image.src.match("bulbon")) { 
      image.src = "Images/pic_bulboff.gif"; 
     } else { 
      image.src = "Images/pic_bulbon.gif"; 
     } 
    } 
</script> 

Answer 2

改變你的JavaScript函數，

<script type="text/javascript"> 
function changeImage(obj) { 
    //var image = document.getElementById('myImage'); 
    if (obj.src.match("bulbon")) { 
     obj.src = "Images/pic_bulboff.gif"; 
    } else { 
     obj.src = "Images/pic_bulbon.gif"; 
    } 
} 

當您從電網調用它，如下打電話，

onclick="changeImage(this);"