Home / Questions / 15449
Accepted
Alan
Asked: 2020-06-30 14:22:44 +0800 CST 2020-06-30 14:22:44 +0800 CST

再次单击后如何将 Html 内容放入按钮？

  • 772

我正在更改单击按钮的内容，但在再次单击后我找不到重新定位初始内容的方法。我使用切换来执行一些操作，但是在更改内容时我没有任何运气：

  // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle();
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
     $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
  });
 <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

我的意图是再次单击它时，它会重新加载初始内容（回复）

jquery

2 Answers

  1. if完成后添加一个.toggle()。检查它是否包含类btn-danger。我把剧本留给你

    // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle();
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
    if($('#showResponse').hasClass("btn-danger")){
      $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
     }else{
      $('#showResponse').html('Responder <i class="fa fa-chevron-down" aria-hidden="true"></i>');
     }
     
  });
    <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

    • 3
  2. Best Answer

    在这种情况下，检查您隐藏和显示的另一个按钮的可见性可以更改文本。

    // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle(0, function(){
       if($(this).is(":visible"))
          $('#showResponse').html('Responder <i class="fa fa-chevron-down" aria-hidden="true"></i>');
       else
          $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
       });
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
    
  });
    <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

    • 2