如何解决选择父级时更改 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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。