使用jQuery添加类无法按预期的方式用于仪表板图标

Question

每当addClass('text-info') .dashboard__icon--small.fa.fa-circle时，我都会将此jquery代码发送到hasClass('text-info')。所需的输出是，仅book2圆圈变成蓝色而不是book1，因为first_edit的book1没有像first_edit的book2那样具有蓝色的圆圈。我看着jquery的closest()函数，但是没有用。

$(document).ready(function(){
    if ($('.dashboard__icon--small.fa.fa-circle').hasClass('text-info')) {
       $('.dashboard__icon.fa.fa-circle').addClass('text-info');
    }
});

<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<table class="form-table form-table--big">
  <tbody class="form-table__body">
    <tr class="form-table__row">
      <td class="form-table__data">
        <input type="checkbox" name="checkbox_object_ids[]" id="checkbox_object_ids_" value="">
        <a aria-hidden="true" class="dashboard__tool fa fa-tasks js-toggle" data-href="" href="#" title="Show"></a>
        <i aria-hidden="true" aria-title="Processed" class="dashboard__icon fa fa-circle"></i>
      </td>
      <td class="form-table__data">
        <a class="js-toggle" href="#">book1</a>
      </td>
    </tr>
    <tr class="form-table__row--extra hidden" data-toggle="">
      <td class="form-table__data"></td>
      <td class="form-table__data">
        <div class="form-table__meta-row">
          <a class="js-toggle" data-href="" href="#">first_edit</a>
        </div>
      </td>
    </tr>
    <tr class="form-table__row--extra hidden" data-toggle="">
      <td class="form-table__data"></td>
      <td class="form-table__data">
        <div class="form-table__meta-row">
          <a class="js-toggle" data-href="" href="#">second_edit</a>
        </div>
      </td>
    </tr>
    <tr class="form-table__row">
      <td class="form-table__data">
        <input type="checkbox" name="checkbox_object_ids[]" id="checkbox_object_ids_" value="">
        <a aria-hidden="true" class="dashboard__tool fa fa-tasks js-toggle" data-href="" href="#" title="Show"></a>
        <i aria-hidden="true" aria-title="Processed" class="dashboard__icon fa fa-circle"></i>
      </td>
      <td class="form-table__data">
        <a class="js-toggle" href="#">Book2</a>
      </td>
    </tr>
    <tr class="form-table__row--extra hidden" data-toggle="">
      <td class="form-table__data"></td>
      <td class="form-table__data">
        <div class="form-table__meta-row">
          <a class="js-toggle" data-href="" href="#">first_edit</a>
          <span aria-hidden="true" class="dashboard__icon dashboard__icon--small fa fa-circle text-info" title="New"></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</body>

</html>

想要的输出：

“需要的输出”

Answer 1

这里出了问题。加载页面后，将以[]条件运行if块

$('.dashboard__icon--small.fa.fa-circle').hasClass('text-info')

hasClass，在与许多元素匹配的jQuery对象上调用时，如果任何元素具有其参数中指定的一个或多个类，则将返回true。因此，这意味着如果有任何包含“文本信息”的圆，它将进入hasClass块。

在if块中，运行以下代码：

if

现在，这会将“ text-info”类添加到与该选择器匹配的所有元素，而不管它们相对于$('.dashboard__icon.fa.fa-circle').addClass('text-info');块中匹配的元素存在于何处。要将这两件事链接在一起（条件中匹配的元素和块中匹配的元素），我们需要变得更加复杂。

这里是您需要做的一种方法。我已经在每行代码中添加了注释，以解释其功能。希望这是有道理的。我创建了许多变量，以使其更易于解释，然后提供了一种在重要的情况下将所有事情都一行处理的方法。

if$(document).ready(function(){
    // step 1: get all of the small icons that have the text-info class
    $('.dashboard__icon--small.fa.fa-circle.text-info').each(function (index, el) {
      // for each of those,
      // get the closest table row
      var tr = $(el).closest('tr');
      // get all of the previous rows that have the form-table__row class
      var bookRows = tr.prevAll('.form-table__row');
      // get the first one (should be the one closest to the tr of the text-info 
      var myBookRow = bookRows.first();
      // find the circle icon for this row
      var myBookRowCircle = myBookRow.find('.dashboard__icon.fa.fa-circle');
      // add the text-info class
      myBookRowCircle.addClass('text-info');
      // all in one line
      $(el).closest('tr').prevAll('.form-table__row').first().find('.dashboard__icon.fa.fa-circle').addClass('text-info');
    });
});

使用jQuery添加类无法按预期的方式用于仪表板图标

问题描述投票：0回答：1

1个回答

最新问题

使用jQuery添加类无法按预期的方式用于仪表板图标

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1