按下时如何更改切换按钮文本？

Question

我希望能够按下一个显示“隐藏”的按钮，然后在用户单击该按钮时说“显示”。在下面的代码中，切换部分有效，但现在我需要“隐藏”文本在内容被隐藏后变为“显示”。

我从以下位置获取了切换代码： http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U

  <script type="text/javascript">
    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }
    </script>

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="javascript:toggle('pos')">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

原文由 Rayray Silby 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的按钮代码更改为如下所示：

 <div class="ISHide" onclick="toggle(this)"><a href="#" >Hide Products</a></div>

并将您的脚本更改为这样的内容

<script type="text/javascript">
function toggle (t) {
if (t.childNodes[0].innerHTML == "Hide Products") {
    t.childNodes[0].innerHTML = "Show Products";
} else {
    t.childNodes[0].innerHTML = "Hide Products";
}
}
</script>

原文由 seaBass 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于您的问题被标记为 jQuery，因此请使用 jQuery：

 <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>

$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle();

    return false;
});

示例：http: //jsfiddle.net/calder12/KCj3r/

原文由 Rick Calder 发布，翻译遵循 CC BY-SA 3.0 许可协议