Question

在CSS中，尽管我将徽章编号指定为0，但它应该由jQuery / JavaScript动态更改。我尝试了以下代码，但是没有用：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload='preventDefault()'>
<div class="container">
  <button class="btn btn-sm btn-default like-btn active" type="button" id="10">
    <span class="text">Alert</span>
    <span class="badge like-badge">0</span>
</button>
</div>
<script>
 preventDefault = function(){
 var btnText = $(this).find(".btn-text")       
 var badge = $(this).find(".like-badge")
 var count = parseInt(badge.text());
 if ($(this).hasClass('active')) {
        btnText.text("Like");
        badge.text(2);
        $(this).removeClass('active');
    }
  else {
        btnCaption.text("Liked");
        badge.text(count + 1);
        $(this).addClass('active');
    }
}
</script>
</body>
</html>

Answer 1

我有一些正确的代码段。.

<button class="btn btn-sm btn-default like-btn active" onclick="preventDefault()" type="button" id="10">
<span class="btn-text">Alert</span>
<span class="badge like-badge">0</span>
</button>

为按钮文本添加了btn-text。

javascript更正：

preventDefault = function(){
   var btn = $('.btn');
   var btnText = $(this).find(".btn-text")       
   var badge = $(".like-badge");
   var count = parseInt(badge.text());
   console.log(count);

   if (btn.hasClass('active')) {
      btnText.text("Like");
      badge.text(2);
      btn.removeClass('active');
   }else {
      btnText.text("Liked");
      badge.text(count + 1);
      btn.addClass('active');
   }
}

添加了var btn = $('.btn');用于选择按钮元素。

在btn条件下称为$(this)而不是if。

万岁！代码对我有用。请检查是否满意。

Answer 2

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body onload='preventDefault()'>
    <button class="btn btn-sm btn-default like-btn active" onclick="preventDefault()" type="button" id="10">
    <span class="btn-text">Alert</span>
    <span class="badge like-badge">0</span>
    </button>
    <script>
    $(document).ready(function () {
    preventDefault();
    });
    preventDefault = function(){
    var btn = $('.btn');
    var btnText = $(this).find(".btn-text")       
    var badge = $(".like-badge");
    var count = parseInt(badge.text());
    console.log(count);
    if (btn.hasClass('active')) {
    btnText.text("Like");
    badge.text(2);
    btn.removeClass('active');
    }else {
        btnText.text("Liked");
          badge.text(count + 1);
      btn.addClass('active');
   }
}

    </script>
    </body>
    </html>

我以某种方式认为上述代码很有用。有人请。审核

我想使用javascript引导按钮动态显示徽章编号

2 个答案: