Question

<div class="footer">
    <div class="follow-button" id="1">
        <a class="follow" id="follow">follow</a>
    </div>
    <small class="pull-right date">december 1st, 2018</small>
</div>

我在HTML部分中进行了此设置，主要关注点是“按键”按钮＆＃39;格。

下面，我编写了一个脚本来更改按钮以阅读＆＃39;关注＆＃39;点击它，然后回到＆＃39;关注＆＃39;是否应该再次点击。但它似乎并没有这样做。

  <script>
    $('.follow-button').click(
      function() {
          if($('#follow').attr('class')=="follow")
          {
            $('#follow').attr('class', 'followed');
            $('#follow').text('followed');
          } else {
            $('#follow').attr('class', 'follow');
            $('#follow').text('follow');
          }
      }
    );
  </script>

我确定问题很愚蠢，但我必须做一些事情，因为只是几次迭代之前它工作正常（现在我甚至无法让以前的迭代工作）。< / p>

Answer 1

使用.addClass()添加课程
使用hasClass()检查元素是否具有类。
使用.removeClass()删除课程

$('.follow-button').click(
  function() {
    if ($('#follow').hasClass("follow")) {
      $('#follow').removeClass('follow').addClass('followed').text('followed');

    } else {
      $('#follow').removeClass('followed').addClass('follow').text('follow');
    }
  }
);

.followed {
  color: red
}

.follow {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="follow-button" id="1">
    <a class="follow" id="follow">follow</a>
  </div>
  <small class="pull-right date">december 1st, 2018</small>
</div>

多个：

使用data-*代替ID。 ID在上下文中应该是唯一的

$('.follow-button').click(
  function() {
    if ($(this).find('[data-id=follow]').hasClass("follow")) {
      $(this).find('[data-id=follow]').removeClass('follow').addClass('followed').text('followed');

    } else {
      $(this).find('[data-id=follow]').removeClass('followed').addClass('follow').text('follow');
    }
  }
);

.followed {
  color: red
}

.follow {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <div class="follow-button" id="1">
    <a class="follow" data-id="follow">follow</a>
  </div>
  <small class="pull-right date">december 1st, 2018</small>
  
  
  
  
  <div class="follow-button" id="1">
    <a class="follow" data-id="follow">follow</a>
  </div>
  <small class="pull-right date">december 1st, 2018</small>
</div>

Answer 2

JQuery提供了几个用于处理类的函数，即hasClass用于检查元素是否具有特定类，addClass用于为元素提供新类，removeClass用于从元素中删除类。使用它们而不是attr可以解决您的问题：

toggleClass功能可用于使其更清洁：

if ($('#follow').hasClass("follow")) {
    $('#follow').toggleClass('followed').toggleClass('follow');
    $('#follow').text('followed');
} else {
    $('#follow').toggleClass('followed').toggleClass('follow');
    $('#follow').text('follow');
}

Answer 3

您的代码工作正常但您可以像下面那样微调您的代码而不是“IF”

$('.follow-button').click(
  function() {
  var divfollow  =  $('#follow');  
  divfollow.hasClass("follow") ?       
  divfollow.removeClass('follow').addClass('followed').text('followed') :
  divfollow.removeClass('followed').addClass('follow').text('follow');
});

https://jsfiddle.net/1rxLjbnt/2/

.attr（）似乎没有更新属性（类）

3 个答案: