Question

HTML

<a id="lnkShowExportBtn" runat="server">Look at image</a>

的jQuery

lnkShowExportBtn.Attributes.Add("onclick", @"{ var rowImage = document.getElementById('rowImage');
    if(rowImage.style.display == 'none')
           {
            rowImage.style.display = 'block';
            var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
            lnkShowExportBtn.innerHTML = 'Hide image';
          }
    else  {
            rowImage.style.display = 'none';
            var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
            lnkShowExportBtn.innerHTML = 'Look at image';
          }
}");

收到此错误：

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null

我做错了什么？只是无法达到目的。

感谢。

Answer 1

您正在将'<%=lnkShowExportBtn.ClientID%>'作为字符串传递，未评估以替换真实的客户端ID值，您可以在生成的html中看到该值。如果你在aspx中添加javascript并在服务器端绑定它会更简单。

在

背后的代码中

lnkShowExportBtn.Attributes.Add("onclick", "YourFunction()");

OR，在ASPX中

<a id="lnkShowExportBtn" runat="server" onclick="YourFunction();">Look at image</a>

在javascript中

function YourFunction() 
{   
  var rowImage = document.getElementById('rowImage');
  if (rowImage.style.display == 'none') {
      rowImage.style.display = 'block';
      var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
      lnkShowExportBtn.innerHTML = 'Hide image';
  } else {
      rowImage.style.display = 'none';
      var lnkShowExportBtn = document.getElementById('<%=lnkShowExportBtn.ClientID%>');
      lnkShowExportBtn.innerHTML = 'Look at image';
  }
}

Answer 2

尝试使用jQuery：这里我将click事件绑定到lnkShowExportBtn并在if条件检查图像可见的帮助下更改它的内部html。通过使用.toggle()，我正在隐藏和显示图像。

$(document).ready(function(){

  $('#lnkShowExportBtn').click(function(){
       var innerHtml = 'Hide image';
       if($('.rowImage').is(':visible'))
      {
        innerHtml = 'Look at image';
      }
      $(this).html(innerHtml);
      $('.rowImage').toggle();
   });
});

<强> Demo

有关jQuery的更多信息： click jQuery

JavaScript Server元素onclick事件

2 个答案: