Как изменить текст кнопки переключения при нажатии?

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

Мой «ответ» является модификацией ответа Рик Колдера. Я использовал код, предоставленный для аналогичного сценария, но у него были теги 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(); 
}); 

Спасибо, Рик и ОП.

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 установлена ​​в «понравившуюся» и наоборот, а затем заменяет текстовое содержимое. Работа для меня Cheers, : D