Question

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

<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按钮。

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

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>

Answer 2

这就是我要做的事情：在按钮上添加一个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>

Answer 3

试试这个：

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;
}

Answer 4

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

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>

Answer 5

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

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

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

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

反之亦然： - ）

Answer 6

如果我理解你的问题，这将解决你的问题：

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

更改按钮的文字和功能

6 个答案: