时间戳

首页 > 解决方案 > 缺少针对遍历 dom 的正确元素

javascript - 缺少针对遍历 dom 的正确元素

问题描述

我有一个如下的 HTML 结构（相关部分）：

<div class="col-md-6">
    <div class="card card-warning">something here</div>
</div>
<div class="col-md-6">
    <div class="card">something else here</div>
</div>

我希望能够card-warning从第一张卡中删除该类，并将其添加到第二张单选按钮的切换按钮（每张卡中一个）。

到目前为止，我的代码正确地将类添加到第二张卡，但未能从第一张卡中删除它。

$(this).closest('div.card').addClass('card-warning').prev('div.card').removeClass('card-warning');

$(this)是选中的单选按钮，.closest('div.card').addClass('card-warning')并按预期正确添加类。关键.prev('div.card').removeClass('card-warning')是不是针对前一张卡。

我究竟做错了什么？

标签： javascriptjquerydom

解决方案

我不知道这是否是您搜索的内容，但在代码段下方，显示示例

  • 首先将类添加到最近的 div 卡

  • 然后从除当前使用的其他 div.card 中删除类

    .parents('.row').find('div.card').not($(this).parents('div.card'))

$(function() {

  $(".apply").on("click", function() {
    $(this).closest('div.card').addClass('card-warning').parents('.row').find('div.card').not($(this).parents('div.card')).removeClass("card-warning");

  })

})
.apply {
  margin-left:20px;
  color: red;
}

.card-warning {
  background-color: yellow !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  
  <div class="row">
    <div class="col-md-6">
      <div class="card card-warning">something here <input name="apply" class="apply" type="radio"/></div>
    </div>
    <div class="col-md-6">
      <div class="card">something else here <input name="apply" class="apply" type="radio"/></div>
    </div>

  </div>
  

</div>

推荐阅读