javascript - 更改按钮的文本和功能

Question

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

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

JS部分是这样的:

var search = new SiteSearch();

现在我想这样做:

单击后，按钮的标签应显示停止搜索。调用的函数应该是 search.stop()。如果用户点击停止搜索，按钮应该再次成为开始搜索按钮。

我怎样才能优雅地做到这一点？

Answer 1

这里有适用的代码片段:

$(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>