更改按钮的文字和功能

时间:2018-02-14 11:39:03

标签: javascript jquery html

我想做以下事情。我有一个这样的按钮:

<button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button>

JS部分是:

var search = new SiteSearch();

现在我想这样做:

点击后,按钮的标签应显示Stop search。被调用的函数应该是search.stop()。如果用户点击Stop search,该按钮应该再次是Start search按钮。

我怎样才能以优雅的方式做到这一点?

6 个答案:

答案 0 :(得分:2)

此处您有以下工作代码段:

$(document).ready(function() {
  function startSearch() {
     console.log('Here your start search procedure');
  }
  
  function stopSearch() {
     console.log('Here your stop search procedure');
  }
  
  $('.search-button').click(function() {
      var buttonSelector = '.search-button';
      
      if($(buttonSelector).hasClass('searching')) {
          $(buttonSelector).removeClass('searching');
          $(buttonSelector).text('Start search');
          stopSearch();
      } else {
          $(buttonSelector).addClass('searching');
          $(buttonSelector).text('Stop search');
          startSearch();
      }
  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="uk-button uk-position-bottom search-button">Start search</button>

答案 1 :(得分:1)

这就是我要做的事情:在按钮上添加一个ID,然后在脚本中查询该按钮并为其添加一个点击监听器。该脚本将跟踪是否正在进行搜索,然后调用search.start/stop()并相应地设置按钮文本。

<button id="search-button" class="uk-button uk-position-bottom">
  Start search
</button>

<script>
  const search = new SiteSearch()
  const searchButton = document.querySelector('#search-button')

  let searching = false

  searchButton.addEventListener('click', () => {
    if (!searching) {
      search.start()
      searching = true
      searchButton.textContent = 'Stop search'
    } else {
      search.stop()
      searching = false
      searchButton.textContent = 'Start search'
    }
  })
</script>

答案 2 :(得分:0)

试试这个:

HTML:

<button id="search-btn" "class="uk-button uk-position-bottom" onclick="toggleSearch()">Start search</button>

JS:

var searching = false;
function toggleSearch(){
   if(searching){
       search.stop();
       document.getelementbyid("search-btn").innerHTML = "Start search";
   }else{
       search.start();
       document.getelementbyid("search-btn").innerHTML = "Stop search";
   }
   searching = !searching;
}

答案 3 :(得分:0)

您可以像下面这样轻松完成:

var $elem = $('.uk-button.uk-position-bottom');
var search = {
  //start function
  start: function(){
    //change the text
    $elem.text('Stop search');
    //change the click function
    $elem.attr('onclick', 'search.stop()');
    console.log('start clicked');
  },
  //stop function
  stop: function(){
    //change the text
    $elem.text('Start search');
    //change the click function
    $elem.attr('onclick', 'search.start()');
    console.log('stop clicked');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button>

答案 4 :(得分:0)

我认为这个答案与普遍发布的问题相同:

https://stackoverflow.com/a/10671201/7387232

稍微补充说,当点击按钮时,按钮必须通过支票更改onclick适当性

object.onclick = function() {
if(search.isRunning()) search.stop();
}

反之亦然: - )

答案 5 :(得分:0)

如果我理解你的问题,这将解决你的问题:

<button class="uk-button uk-position-bottom" data-process="0">Start search</button>

  <script>
                $(".uk-button").click(function () {

                    var $this = $(this);
                    var processStatus = $this.data("process");
                    //var search = new SiteSearch(); 

                    if (processStatus == "0") {
                        //you can trigger start function
                        $this.data("process", "1");
                        $this.text("Stop Search");
                    }
                    else if (processStatus == "1") {
                        //you can trigger stop function
                        $this.data("process", "0");
                        $this.text("Start Search");
                    }

                });
 </script>