顯示/隱藏單個父級點擊的多個子類（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");
});

工作演示

要對圖標運行兩種操作，請使用此命令

$('.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");
});

工作演示

注意：請確保包含Jquery

Answer 2

您可以為圖標div添加一個通用類圖標，為標題div添加標題，以下代碼將起作用，

     $(".pov_icon_small").on('click',function(){
        $(this).parent().siblings().children('div').each(function(value){
            if($(this).hasClass('icon'))
              $(this).addClass('pov_icon_small').removeClass('pov_icon_large');
            else if($(this).hasClass('title'))
              $(this).addClass('pov_title_small').removeClass('pov_title_large');

        });

        $(this).addClass('pov_icon_large').removeClass('pov_icon_small');
        $(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
      });

正如您所看到的，我首先要單擊圖標的父級，即您的pav_icon div現在我正在為同級中的每個div更改所有同級。 如果是Iicon，則如果更改標題類別，則根據需要更改圖標類別。