按类名为块子类添加/删除类

Question

我有这个html来展示我的产品。

<div class="row section-margin">
            <!-- Single Product Tab Start -->
            <div class="col-lg-12 col-custom single-product-tab">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link text-uppercase contact-tab" data-bs-toggle="tab" href="#connect-1"
                           role="tab" aria-selected="false">Характеристики</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-uppercase contact-tab" data-bs-toggle="tab" href="#connect-2"
                           role="tab" aria-selected="false">Политика доставки</a>
                    </li>
                </ul>

                <div class="product-block-information">
                    <div class="product-info">
                        <table class="table table-hover">
                            <tbody>
                                <tr>
                                    <th scope="row">Объем двигателя</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->engine_volume ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Тип двигателя</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->engine_type ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Охлождение</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->cooling ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Макс. мощность</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->max_power ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Макс. крутящий момент</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->max_engine_speed ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Сиcтема питания</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->supply_system ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Система зажигания</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->ignition_system ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Система пуска</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->launch_system ?></th>
                                </tr> <tr>
                                    <th scope="row">КПП / Главная передача</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->kpp ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Передняя подвеска</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->front_suspension ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Задняя подвеска</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->ear_suspension ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Тормоза, передний / задний</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->brakes ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Шины, передняя / задняя</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->tires ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">ДхШхВ</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->dshv ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Колесная база</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->wheelbase ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Высота по сидению</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->seat_height ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Клиренс</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->ground_clearance ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Сухой вес</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->dry_weight ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Обьем топливново бака</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->fuel_tank_volume ?></th>
                                </tr>
                                <tr>
                                    <th scope="row">Максимальная скорость</th>
                                    <th scope="row"><?php  echo $model->productsAttributes->maximum_speed ?></th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="product-info">
                        Text politici dostawci
                    </div>
                </div>
                <!-- Single Product Tab End -->
            </div>
        </div>

我有这个jquery

//show product information
    jQuery('.nav-item').click(function (e) {
      const child = jQuery(this).index();
      console.log(child);
        jQuery('.product-block-information:nth-child(1)').addClass('info-active');
      //info-active
    })

当用户单击li元素上的第一个子元素时，将class info-active添加到product-block-information上的第一个元素中，当用户在li上单击第二个子元素时，从第一个元素中删除info-active并在product-block-information上将info-active类添加到第二个子元素中。

怎么做？

Answer 1

您可以使用index() & :eq()方法来实现这一点。

演示代码：

​

jQuery('.nav-item').click(function(e) {
  const child = jQuery(this).index();
  //remove info active from others..
  jQuery('.product-block-information > .product-info').removeClass("info-active")
  //add to where index matches
  jQuery('.product-block-information > .product-info:eq(' + child + ')').addClass('info-active');
})

.info-active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row section-margin">
  <!-- Single Product Tab Start -->
  <div class="col-lg-12 col-custom single-product-tab">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link text-uppercase contact-tab" data-bs-toggle="tab" href="#connect-1" role="tab" aria-selected="false">Характеристики</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-uppercase contact-tab" data-bs-toggle="tab" href="#connect-2" role="tab" aria-selected="false">Политика доставки</a>
      </li>
    </ul>

    <div class="product-block-information">
      <div class="product-info">
        <table class="table table-hover">
          <tbody>
            <tr>
              <th scope="row">Объем двигателя</th>
              <th scope="row">
                <?php  echo $model->productsAttributes->engine_volume ?>
              </th>
            </tr>

          </tbody>
        </table>
      </div>
      <div class="product-info">
        Text politici dostawci
      </div>
    </div>

  </div>
</div>

​