【问题标题】:JQuery- Change href of anchor tag using value in DivJQuery-使用Div中的值更改锚标记的href
【发布时间】:2013-03-07 07:14:34
【问题描述】:

我在更改锚标记中的 href 值时遇到问题。基本上,我想使用一个提示提示,它根据已登录用户的员工 ID 打开一个工具提示页面。

提示代码:

    $(document).ready
    (
      function () {

          $('#sticky').cluetip({ sticky: true, closePosition: 'title', arrows: true });
          $('a.jt:eq(0)').cluetip({
              cluetipClass: 'jtip',
              arrows: true,
              dropShadow: false,
              hoverIntent: false,
              sticky: true,
              mouseOutClose: true,
              closePosition: 'title',
              closeText: '<img src="Images/cross.png" alt="close"/>'
          });

}

现在,可以看到锚标记:

     <a class="jt" style="color: #FFFFFF;" id="Anchor_work"  runat="server" href='WorkExp.aspx?Emplid=12345'>Previous Work Experience</a>

我正在尝试使用 jquery 更改 href 链接以指向正确的员工 ID。所以,我想将员工 ID 的值存储在 DIV 中。

    <div id="Workexp_div" runat="server"/>

JQuery 使用 DIV 标签更改 href:

      $(document).ready
    (
      function () {

          $('#sticky').cluetip({ sticky: true, closePosition: 'title', arrows: true });
          $('a.jt:eq(0)').cluetip({
              cluetipClass: 'jtip',
              arrows: true,
              dropShadow: false,
              hoverIntent: false,
              sticky: true,
              mouseOutClose: true,
              closePosition: 'title',
              closeText: '<img src="Images/cross.png" alt="close"/>'
          });

          function showDivText() {

              //divObj = document.getElementById('Workexp_Div'); 
              divObj = document.getElementById("#<%= Workexp_Div.ClientID %>");
              if (divObj) {
                  if (divObj.textContent) { // FF
                      alert(divObj.textContent);
                  } else {  // IE           
                      alert(divObj.innerText);  //alert ( divObj.innerHTML );
                  }
              }
          }
          //var new_href = "WorkExp.aspx?Emplid=" + $('#ctl00_ContentPlaceHolder1_Workexp_div').InnerText;
          var new_href = "WorkExp.aspx?Emplid=" + showDivText();
          $("#Anchor_work").attr("href", new_href);
          //= 'WorkExp.aspx?Emplid='+ $('#ctl00_ContentPlaceHolder1_Workexp_div').InnerText;           


      }


    );

上面的代码给了我一个错误,说 WorkExp_div 在当前上下文中不存在。我尝试通过 divObj = document.getElementById('Workexp_Div'); 删除客户端 ID但随后该对象返回为 null。

谁能告诉我如何检索 div 标签的值并更改标签中 href 的值?

非常感谢

【问题讨论】:

    标签: jquery .net cluetip


    【解决方案1】:

    如果你替换:

          function showDivText() {
    
              //divObj = document.getElementById('Workexp_Div'); 
              divObj = document.getElementById("#<%= Workexp_Div.ClientID %>");
              if (divObj) {
                  if (divObj.textContent) { // FF
                      alert(divObj.textContent);
                  } else {  // IE           
                      alert(divObj.innerText);  //alert ( divObj.innerHTML );
                  }
              }
          }
    

    与:

    function showDivText() {
        var divObj = $("#<%= Workexp_Div.ClientID %>");
        alert(divObj.text());
        return divObj.text();
    }
    

    是否会发出警报并返回正确的值?

    如果是这样,那么您可以删除它并执行以下操作:

    var new_href = "WorkExp.aspx?Emplid=" +  $("#<%= Workexp_Div.ClientID %>").text();
    

    【讨论】:

    • 谢谢。我试过这个。但是,它向我抛出了一个错误,即 Workexp_Div 在当前上下文中不存在,即使它存在。
    • 我在使用 jquery 语法时出错。我这样做了,它给了我价值。函数 showDivText() { var divObj = $("#ctl00_ContentPlaceHolder1_Workexp_div");警报(divObj.text());返回 divObj.text();但是,现在我无法通过使用 $("#ctl00_ContentPlaceHolder1_Anchor_work").attr("href", new_href); 来更改 href 值;
    • 所以,&lt;%= Workexp_Div.ClientID %&gt; 似乎没有返回客户端 ID? - alert($("#&lt;%= Workexp_Div.ClientID %&gt;").attr('id')); 怎么样 - 注意需要存在于页面代码而不是外部文件中才能获得替换服务器端。
    • 再次感谢。它仍然无法正常工作。现在,我可以使用 $("#ctl00_ContentPlaceHolder1_Workexp_div") 参考。现在 href 也发生了变化。但是,线索提示不起作用。也就是说,当我将鼠标悬停在它上面时,该值不会显示出来:( :(
    • 我对线索提示一无所知 - 但这似乎是另一个问题。
    猜你喜欢
    • 1970-01-01
    • 2011-04-29
    • 2011-04-08
    • 2020-03-29
    • 2021-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-20
    相关资源
    最近更新 更多