Question

我试图在点击时更改对象的类。我有一个带按钮的Bootstrap卡，我想要这个按钮将这张卡的等级从“card border-secondary”改为“card border-success”。这是该卡的代码：

<div class="col-md-4">
  div class="card border-secondary mb-3" id="neutralsticker" style="max-width: 18rem;">
    <div class="card-header">Task:</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Short task description</h5>
      <p class="card-text">Detailed task description</p>
      <button type="button" id="goodbtn" class="btn btn-outline-success">Completed</button>
      <button type="button" id="failbutton" class="btn btn-outline-danger">Failed</button>
    </div>
  </div>
</div>

我在javascript中创建了一个简单的代码，在这里熟悉的问题中找到它，但它对我不起作用。也许你会有任何建议，如何让它工作，如何让按钮改变对象类？

$(document).ready(function()  {

    $('goodbtn').click(function () {

       $("neutralsticker").removeClass('card border-secondary mb-3').addClass('card border-success mb-3');
       }
    })


})

Answer 1

goodbtn是该按钮的id值，因此您需要使用id选择器#（#goodbtn）进行访问。

此外，您可以省略删除card和mb-3课程，因为您再次将其添加到addClass。

$('#goodbtn').click(function () { 
   $("#neutralsticker").removeClass('border-secondary').addClass('border-success');
})

实施例

＆＃13;

$(document).ready(function()  {

    $('#goodbtn').click(function () {

       $("#neutralsticker").removeClass('border-secondary').addClass('border-success');
       });

})

＆＃13;

.border-secondary {
   color: red;
}

.border-success {
   color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/>

<div class="col-md-4">
  <div class="card border-secondary mb-3" id="neutralsticker" style="max-width: 18rem;">
    <div class="card-header">Task:</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Short task description</h5>
      <p class="card-text">Detailed task description</p>
      <button type="button" id="goodbtn" class="btn btn-outline-success">Completed</button>
      <button type="button" id="failbutton" class="btn btn-outline-danger">Failed</button>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用goodbtn添加＃。这就是为什么因为你现在正在定位id

$（document）.ready（function（）{

$('#goodbtn').click(function () {

   $("neutralsticker").removeClass('card border-secondary mb-3').addClass('card border-success mb-3');
   }
})

}）

单击更改Bootstrap对象的类

2 个答案: