Question

这是我当前的jquery代码。它将按钮值更改为更少。但不是相反。

$("p").hide();

$(".btn").click(function()
{


 $("p").toggle();

 $(".btn").html("less");

 $(".btn").html("more");

});

Answer 1

试试此代码

$("p").hide();
$(".btn").html("more");
$(".btn").click(function() {
  $("p").toggle();
  if($('p').css('display') == 'none') {
    $(".btn").html("more");
  } else {
    $(".btn").html("less");
  }
});

Answer 2

使用以下代码：

$( ".btn" ).toggle(function() {
  $(".btn").html("less");
}, function() {
  $(".btn").html("more");
});

在切换功能中声明的上述两个功能将用于在文本less和more之间切换。

我怀疑您是否尝试更改按钮的文字，如果是，请使用.val()代替.html()

Answer 3

$('input').click(function() {
  alert($(this).val())
  if ($(this).val() == 'more') {
    $(this).val('less')
  } else {
    $(this).val('more')
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' value='more' />

这样做。如果您使用其他元素而没有价值，只需将.val()更改为.text() or .html()

即可

Answer 4

这是一个可能的解决方案：

＆＃13;

$(document).ready(function () {
  
$(".btn").on('click', function(){

  if ($(this).text() == "less")
    {
      $(this).text('more')
    }
  else
    {
       $(this).text('less')
    }

});
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">less</button>

＆＃13;

如何使用jquery html（）方法实现切换按钮（更多/更少）

4 个答案: