javascript - 选择父级时更改 div 的类

Question

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

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

正常状态：

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

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

这是完整的代码：https ://jsfiddle.net/905hut4v/ （结果选项卡将不起作用，因为我必须从项目中复制并粘贴所有代码，而且我认为我不能[因为 NDA]）。我使用的是 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）。

标签： javascripthtmljquerycsszurb-foundation

Answer 1

您可以使用 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>