单击更改 Bootstrap 对象的类

Posted 2023-03-23

【中文标题】单击更改 Bootstrap 对象的类

【英文标题】：Changing Bootstrap object`s class on click

【发布时间】：2018-04-10 05:35:07

【问题描述】：

我试图在点击时更改对象的类。我有一个带按钮的 Bootstrap 卡，我希望这个按钮可以将此卡的类别从“次要卡边界”更改为“卡边界成功”。这是这张卡的代码：

<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');
       
    )


)

【问题讨论】：

$("neutralsticker") 不会选择任何内容，因为“neutralsticker”不是 html 元素。你想要的是选择“neutralsticker”的ID。所以 $("#neutralsticker") 实际上会选择它。

另外，您不必删除类 mb-3 然后再将其添加回来。如果你 removeClass('border-secondary')，它只会删除类 'border-secondary'。

【参考方案1】：

goodbtn是按钮的id值，所以需要用id选择器-#(#goodbtn)来访问。

您也可以省略删除card 和mb-3 类，因为您再次将它们添加到addClass。

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

例子

$(document).ready(function()  

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

       $("#neutralsticker").removeClass('border-secondary').addClass('border-success');
       );

)

.border-secondary 
   color: red;


.border-success 
   color: green;

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

【讨论】：

感谢您的回复，但不幸的是仍然无法唤醒。

@YehorLapko 查看示例

【参考方案2】：

用 goodbtn 添加#。这就是为什么因为您现在定位到 id

$(document).ready(function()

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

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

)

【讨论】：

$("neutralsticker") 也应该有一个 ID 或类。

感谢您的回复。我做了，但没有帮助，仍然没有反应