Question

当单击下面的按钮时，javascript代码会检查该类是否为btn-default，它是什么，而javascript会更改该类，并且＃34; btn btn-default＆＃34; btn btn-success，但当我再次单击该按钮时，它再次调用下面的javascript代码，即使按钮类已从btn-default更改。

页面上的

代码：

<div class=vote>
      <button type="button" id="test"  type="submit" class="btn btn-default">
      <span class="glyphicon glyphicon-thumbs-up"></span></button>

的javascript：

  $(".vote").find(".btn-default").click(function () {
     button_id =  this.id;
        $.ajax({
            type: 'post',
            url: '/vote',
            data: {
                '_token': $('input[name=_token]').val(),
                'word_id': button_id
            },
            success: function(data) {
                if ((data.errors)){
                  $('.error').removeClass('hidden');
                    $('.error').text(data.errors.name);
                }
                else {
 $('#'+button_id).removeClass('btn btn-default').addClass('btn btn-success');

                }

Answer 1

这种情况正在发生，因为即使课程发生变化，事件仍然附加。

您可以通过使用事件委派来阻止这种情况：

＆＃13;

$(".vote").on('click', ".btn-default", function() {
    console.log('clicked');
    $(this).removeClass('btn-default').addClass('btn-success');
});

＆＃13;

.btn-default {
  background-color: blue;
}

.btn-success {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class=vote>
  <button type="button" id="test" type="submit" class="btn btn-default">
      <span class="glyphicon glyphicon-thumbs-up">Thumbs Up</span>
  </button>
  <button type="button" id="test" type="submit" class="btn btn-default">
      <span class="glyphicon glyphicon-thumbs-down">Thumbs Down</span>
  </button>
</div>

＆＃13;

使用JavaScript更改按钮类

1 个答案: