javascript - 为单个父单击显示/隐藏多个子类(Jquery)

Question

我是 Javascript/Jquery 的新手，我试图在单击特定父类时隐藏多个子类/相邻类。

这是我的 HTML

<div class="container">
  <div class="row">
    <div class ="col-md-2 pov_icon">
     <div class="pov_icon_small">
      <i class="fa fa-clock-o"></i>
     </div>
     <div class="pov_title_small">
       MEASURE
     </div>
    </div>

    <div class ="col-md-2 pov_icon">
     <div class="pov_icon_large">
      <i class="fa fa-map-marker"></i>
     </div>
     <div class="pov_title_large">
       MEASURE
     </div>
    </div>

    <div class ="col-md-2 pov_icon">
     <div class="pov_icon_small">
      <i class="fa fa-commenting"></i>
     </div>
     <div class="pov_title_small">
       MEASURE
     </div>
    </div>
</div>
</div>

我的目标是:当用户单击显示的两个较小图标之一 (pov_icon_small) 时，对于该单独的图标:类 pov_icon_small 和 pov_title_small 将分别更改为 pov_icon_large 和 pov_title_large。同时，我希望其他“大”图标和“标题”恢复到“小”状态

我已经开始调用一些 Javascript，但我认为我的方向不对:

$('.pov_icon_small').on('click', function (e) {
    $(this).toggleClass("pov_icon_large");
});

有人愿意为我指出正确的方向吗？

Answer 1

使用单次点击

$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
    $('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
    $(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});

和标题一样

$('.pov_title_small , .pov_title_large').on('click', function (e) {
    $('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small'); 
    $(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});

Working Demo

要在图标点击时运行这两个操作，请使用此

$('.pov_icon_small , .pov_icon_large').on('click', function () {
    $('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
    $('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small'); 
    $(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
    $(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});

Working Demo

Note: be sure to include Jquery