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>

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>

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/

Answer 3

我的“回答”是Rick Calder答案的修改。我使用了为类似场景提供的代码，但它在按钮内部有HTML标签（在本例中为Font Awesome图标）。我认为这可能有助于某些人将解决方案应用于其他情况。

我必须做的唯一修改是将“.text”更改为“.html”并添加“.addClass”/“。removeClass”以更改按钮样式。（CSS不包括在内，因为它在这里很简单。）

以下是我使用的代码：

$(".expand-button .button").on("click", function(){
    if($(this).html()==" Watch Video <i class=\"fa fa-play\"></i> ")
    {
        $(this).html(" Hide Video <i class=\"fa fa-times\"></i> ");
        $(this).addClass("secondary");
    } else {
        $(this).html(" Watch Video <i class=\"fa fa-play\"></i> ");
        $(this).removeClass("secondary");
    }
    $(".expand-button-content").fadeToggle();
});

谢谢Rick和OP。

Answer 4

var button = document.querySelector(".button")
var text   = document.querySelector(".text")
var t
button.addEventListener("click",function(){


    if(text.textContent=="Like"){
        t = "Liked"
    }
    else{
        t="Like"
    }
    text.textContent=t;
})

这是Like按钮的示例，其更改为Liked。方法非常简单，如果文本是Like，则变量t设置为＆＃34; like＆＃34;反之亦然，然后替换文本内容。为我工作干杯，：d

Answer 5

isActionDisabled: function (v, r, c, item){
                    var cls = item.iconCls;
                    if(r === 2){
                        cls = '';
                    }
                     if(r === 1){
                        cls = 'x-fa fa-warning';
                    }
                     if(r === 4){
                        cls = 'x-fa fa-eye';
                    }
                    item.iconCls = cls;
                    return false;
                }

TextBox.innerHTML = " ";
ButtonId.onclick = function(){
if (TextBox.innerHTML == " ") {
TextBox.innerHTML = "HI";
}
else {
TextBox.innerHTML = " ";
}
}

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

5 个答案: