Question

我有一个按钮，上面有文字......格式如此

<a href="" id="refl" class="button"><span>VIEW ALL CASES</span></a>

我现在有一些jQuery在点击“refl”时切换div。

当隐藏div时，如何更改文本VIEW ALL CASES以显示“查看所有案例”，但在显示div时显示“CLOSE ALL CASES”？

干杯，

Answer 1

$("#ref1").click(function(){
    var div = $("#theDivToToggle");
    div.toggle();
    $(this).find("span").text(div.is(":visible") ? "CLOSE ALL CASES" : "SHOW ALL CASES");
});

Answer 2

$('a#refl').click(function() {
   //select elements
   var $span = $('span', this);
   var $div = $('div#theOneYouAreHidding'); //this is div you hide/show

   //check text to see if we need to hide or show
   if($span.text() == 'VIEW ALL CASES')
   {
      $div.show();
      $span.text('CLOSE ALL CASES');
   }
   else
   {
      $div.hide();
      $span.text('VIEW ALL CASES');
   }
});

Answer 3

$('#refl').click(function() {

   $(this).text(function() {
       return $('#your-element:visible').length ? 'CLOSE ALL CASES' : 'SHOW ALL CASES';
   });

   // hide code

});

Answer 4

$('.button').click(function() {
  var span = $(this).find('span')
  span.html(span.html() == 'CLOSE ALL CASES' ? 'VIEW ALL CASES' : 'CLOSE ALL CASES');
});

我选择使用.html（）而不是.text（），因为您可以在范围内使用其他HTML标记。

Answer 5

$('a#ref1').toggle(
  function () {
    $('div').show(); // div selector here
    $(this).find('span').html('CLOSE ALL CASES');
  },
  function () {
    $('div').hide(); // div selector here
    $(this).find('span').html('VIEW ALL CASES');
  },
);

jQuery - 显示隐藏时显示的文本

5 个答案: