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将更改为{{分别为1}}和pov_icon_large。与此同时，我希望其他“大”图标和“标题”恢复到“小”状态

我开始调用一些Javascript，但我不认为我的方向正确：

pov_title_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

注意：请务必包含Jquery

Answer 2

您可以为标题div的图标div和标题添加公共类图标，以下代码可以使用，

Exception in thread "main" java.lang.IllegalArgumentException: wrong parent for CardLayout
    at java.awt.CardLayout.checkLayout(Unknown Source)
    at java.awt.CardLayout.show(Unknown Source)
    at java_files.AwtLayoutExample.main(AwtLayoutExample.java:33)

在这里，你可以看到，我首先得到了点击图标的父级，即你的pav_icon div现在我正在为所有兄弟姐妹改变现在兄弟姐妹中的每个div。如果标题更改标题类，则Iicon更改图标类。

显示/隐藏单个父单击的多个子类（Jquery）

2 个答案: