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

Я хотел бы иметь возможность нажать кнопку с надписью «скрыть», а затем сказать «показать», когда пользователь нажимает кнопку. В приведенном ниже коде часть переключателя работает, но теперь мне нужно, чтобы текст «скрыть» превратился в «показать», когда содержимое скрыто.

Я взял код переключения из: 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>

javascript togglebutton toggle jquery
person Rayray Silby    schedule 17.04.2013    source источник
comment
У вас есть jQuery, включенный в ваш тег head? Если это так, вы можете сделать это гораздо проще с помощью .toggle() api.jquery.com/toggle< /а>   -  person Moby's Stunt Double    schedule 17.04.2013
comment
Ваш html совсем запутался...   -  person excentris    schedule 17.04.2013
comment
Я знаю, что это испорчено. Человек, который сделал этот код, вывалил его на меня, сделай этот скрытый текст скажи показать. УДАЧИ!   -  person Rayray Silby    schedule 17.04.2013
comment
Возможный дубликат stackoverflow.com/questions/10671174 / Или stackoverflow.com/questions/6475768/change- кнопка-текст-при нажатии   -  person hop    schedule 17.04.2013
comment
Вы могли бы приложить некоторые усилия, прежде чем писать здесь   -  person hop    schedule 17.04.2013

Ответы (5)


arrow_upward
5
arrow_downward

Измените код кнопки на что-то вроде этого:

<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>
person seaBass    schedule 17.04.2013
comment
Кнопка меняется (YAY!), но тумблер выключается. Я вернул исходный код: ‹a href=javascript:toggle('pos')›, чтобы увидеть, включится ли переключатель снова, что он и сделал, но затем он возвращается к тому, чтобы не изменять текст. Думаю, мне придется еще немного повозиться с этим, но текст ДЕЙСТВИТЕЛЬНО изменился, так что это шаг в правильном направлении! - person Rayray Silby; 17.04.2013
comment
Посмотрите, работает ли это лучше для вас. Я изменил код в своем ответе. - person seaBass; 17.04.2013
comment
Нет, тег ul не исчезает; это ссылка, и она все еще меняется, чтобы показать/скрыть, что является хорошим знаком. :) - person Rayray Silby; 17.04.2013

arrow_upward
3
arrow_downward

Поскольку ваш вопрос помечен как 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/

person Rick Calder    schedule 17.04.2013

arrow_upward
2
arrow_downward

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

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

person Ricardo Andres    schedule 21.12.2015

arrow_upward
0
arrow_downward 

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;
})

Это пример кнопки «Мне нравится», которая меняется на «Нравится». Подход действительно прост, если текст нравится, переменная t устанавливается в «нравится» и наоборот, И затем t заменяет текстовое содержимое. Работал для меня Ура, :D

person Nipun Aggarwal    schedule 24.07.2017
comment
Добавьте некоторое объяснение с ответом о том, как этот ответ помогает ОП в устранении текущей проблемы. - person ρяσѕρєя K; 24.07.2017

arrow_upward

arrow_downward

person    schedule
comment
Объяснение кода поможет лучше ответить - person chevybow; 17.08.2018