选择父级时更改 div 的类

问题描述

我的问题/问题实际上与我找不到解决方案的两个问题有关。

这是处于“正常”状态（没有悬停或选中）的 div。当用户选择此 div 时，它会变为紫色边框。我的问题是：当父级被选中时，我如何更改图标（那个蓝色图标）的类？

正常状态：

悬停状态（图标）/选定状态（父级）

另一个问题：所有带图标的div都是同一个类。我尝试了一个代码并且它起作用了，但是也选择了所有 .icon div（有 4 个 div，当我选择一个时，它选择了所有 div）

这是完整的代码：https://jsfiddle.net/905hut4v/（结果选项卡将不起作用，因为我必须复制并粘贴项目中的所有代码，我认为我不能[因为保密协议]）。我使用的是 Foundation 6，这就是 SCSS 上包含错误的原因。

JS

$(function() {

    $('form[name="form-jeitos"] .block-jeito').on('click',function() {
        $(this).siblings().removeClass("selected");
        $(this).addClass("selected");
    });

    $('.image-icon').on('click',function() {
        $(this).siblings().toggleClass('selected');
    });

    $('form[name="form-jeitos"]').on('submit',function(e) {
        e.preventDefault();
        $(this).addClass("hide");
        $('#jeito-title').addClass("hide");
        var checked = $('input:checked',$(this));
        $('#'+checked.val()).siblings().removeClass("is-active");
        $('#'+checked.val()).addClass("is-active");
    });

    $('#jeito-opcoes a.back').on('click',function(e) {
        e.preventDefault();
        $('#jeito-opcoes .is-active').removeClass("is-active");
        $('form[name="form-jeitos"]').removeClass("hide");
        $('#jeito-title').removeClass("hide");
    });

});

SCSS

.block-jeito {
    border: 2px solid rgba(1,33,105,0.1);
    border-radius: 8px;
    padding: 30px 38px 30px 38px;
    opacity: 1;
    filter: alpha(opacity=1);
    transition: all 0.3s ease-in-out;
    margin-bottom: 60px;
    cursor: pointer;

    .image-icon {
        position: relative;

        .img {
            @include breakpoint(medium) {
                margin-left: -10px;
            }
        }

    }

    .icon {
        position: absolute;
        top: 35%;
        background-color: #1155CC;
        padding: 20px;
        left: 45%;
        border-radius: 50%;
        max-height: 75px;
        transition: all 0.3s ease-in-out;

        &:hover,&.selected {
            background-color: #00C7B1;
        }

        @include breakpoint(xsmall) {
            padding: 20px;
            left: 45%;
            top: 35%;
        }

        @include breakpoint(xxsmall) {
            padding: 20px;
            left: 45%;
            top: 35%;
        }

        @include breakpoint(medium) {
            padding: 20px;
            left: 25%;
            top: 45%;
        }

        @include breakpoint(xmedium) {
            padding: 15px;
            left: 55%;
            top: 45%;
        }

        @include breakpoint(large) {
            padding: 10px;
            left: 65%;
            top: 45%;
        }

        @include breakpoint(xlarge) {
            top: 45%;
            left: 55%;
            padding: 15px;
        }
    }

    &:hover,&.selected {
        border: 2px solid #5F249F;
    }

    &.hide {
        opacity: 0;
        filter: alpha(opacity=0);
        transition: opacity 0.3s ease-in-out;
    }

    p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;

        @include breakpoint(medium) {
            font-size: 24px;
            line-height: 36px;
        }

        strong {
            font-weight: 700;
        }

    }

    img {

        margin-bottom: 50px;

        @include breakpoint(medium) {
            margin-bottom: 0px;
        }

    }

}

HTML

<form name="form-jeitos">

  <div class="grid-x grid-margin-x">

    <label id="codigo-block"
           class="cell labl small-12 medium-6 block-jeito align-middle">

      <div class="grid-x grid-margin-x">

        <div class="cell small-12 large-4 image-icon">
          <img src="../assets/img/foto-codigo.png" class="img"
               alt="Imagem de código e programação,representando a nordware">
          <div class="icon">
            <img src="../assets/img/icon-codigo.png" alt="">
          </div>
        </div>

        <div class="cell small-12 large-8">
          <input type="radio" name="opcoes" value="teste-nordware"
                 checked="checked"/>
          <p><strong>Código e programação</strong> é comigo mesmo!</p>
        </div>

      </div>

    </label>

    <label id="estrategia-block"
           class="cell labl small-12 medium-6 block-jeito align-middle">

      <div class="grid-x grid-margin-x">

        <div class="image-icon" class="cell small-12 large-4">
          <img src="../assets/img/foto-estrategia.png" class="img"
               alt="Adoro trabalhar com estratégias,pessoas e processos.">
          <div class="icon">
            <img src="../assets/img/icon-estrategia.png" alt="">
          </div>
        </div>

        <div class="cell small-12 large-8">
          <input type="radio" name="opcoes" value="teste-proxys"/>
          <p>Adoro trabalhar com <strong>estratégias,pessoas e
            processos.</strong></p>
        </div>

      </div>

    </label>

    <label id="tecnologia-block"
           class="cell labl small-12 medium-6 block-jeito align-middle">

      <div class="grid-x grid-margin-x">

        <div class="image-icon" class="cell small-12 large-4">
          <img src="../assets/img/foto-tecnologia.png" class="img"
               alt="Imagem de tecnologia e notebooks,representando a BringII">
          <div class="icon">
            <img src="../assets/img/icon-tecnologia.png" alt="">
          </div>
        </div>

        <div class="cell small-12 large-8">
          <input type="radio" name="opcoes" value="teste-bringit"/>
          <p>Gosto de novidades,do mundo de <strong>tecnologia e
            notebooks.</strong></p>
        </div>

      </div>

    </label>

    <label id="mobilidade-block"
           class="cell labl small-12 medium-6 block-jeito align-middle">

      <div class="grid-x grid-margin-x">

        <div class="image-icon" class="cell small-12 large-4">
          <img src="../assets/img/foto-mobilidade.png" class="img"
               alt="Imagem de tecnologia e notebooks,representando a BringII">
          <div class="icon">
            <img src="../assets/img/icon-mobilidade.png" alt="">
          </div>
        </div>

        <div class="cell small-12 large-8">
          <input type="radio" name="opcoes" value="teste-mobiz"/>
          <p>Seja carro,moto ou bike,eu curto é <strong>mobilidade.</strong>
          </p>
        </div>

      </div>

    </label>

    <div class="cell small-12">

      <button type="submit" class="button">Conferir Resultados</button>

    </div>

</form>

顺便说一句，如果您想知道为什么 javascript 上还有另外两个功能：当用户选择一个 div 并单击提交按钮时，我们将用户“重定向”到另一个页面（我们实际上只是取消隐藏一个 div） .

解决方法

您可以通过CSS选择器完成父div焦点上图标图像的切换，无需使用JavaScript。

一个最小的例子：

.outer {
  width: 50vw;
  padding: 2rem;
  border: 2px solid gray;
}

.outer .nofocus {
  display: inline;
}

.outer .focus {
  display: none;
}

.outer:focus .nofocus {
  display: none;
}

.outer:focus .focus {
  display: inline;
}

<p>Click inside the box:</p>
<div class="outer" tabindex="0">
  <div class="icon">
    <img class="nofocus" src="https://i.picsum.photos/id/841/60/60.jpg?hmac=O4KlxA1-OGoNAFLLbula_vD6LrmU4H-l-yD5kkXpmLI">
    <img class="focus" src="https://i.picsum.photos/id/453/60/60.jpg?hmac=prDxZwonQi-meeXg_btjnTrjJKw5Crr85tpKIiCP_6E">
  </div>
</div>

,

我自己没有解决这个问题，我实际上得到了一个高级前端的帮助。

他说的是：JS 将选定对象放入两个 div（在主 div 和子 div 中）。

所以问题不是真正的 JS，而是 CSS！

我们是这样解决的：

&:hover,&.selected {
  border: 2px solid #5F249F;
    
  .icon {
    background-color: #00C7B1;
  }
}