Есть скрипт, который вызывается при клике по блоку и любым его дочерним элементам:
$('.entry__item').click(function() {
if(this.classList.contains('js--entry-selected')) {
this.classList.remove('js--entry-selected');
}
else {
this.classList.add('js--entry-selected');
}
});
.entry__item{width:158px;padding:20px 13px 21px;margin-bottom:5px;margin-left:5px;display:inline-block;text-align:center;background:0 0;border:2px solid #a8a8a8}
.entry__name{margin-bottom:5px;font-size:17px;font-weight:700;word-wrap:break-word}
.entry__country{position:relative;display:block;margin-bottom:30px;font-size:14px;font-weight:300}
.entry__country::after{content:"";position:absolute;bottom:-13px;left:50%;width:96px;height:1px;margin-left:-48px;display:block;background:#a8a8a8}
.entry__btn, .entry__btn:focus{display:inline-block;padding:11px 20px;margin-bottom:12px;font-size:12px;font-weight:700;text-align:center;text-transform:uppercase;background:#a8a8a8;color:#fff;border-bottom:4px solid #757575;border-radius:3px; text-decoration: none;}
.entry__btn:hover{background:#cc0001;border-color:#B40001; text-decoration: none; color: #fff;}
.entry__btn:active{background:#B40001;border-color:#B40001; text-decoration: none; color: #fff;}
.entry__info{font-size:16px;font-weight:300;color:#000;border-bottom:1px solid #000;}
.js--entry-selected{background:#cc0001;color:#fff!important;border-color:#fff}
.js--entry-selected .entry__country::after{background:#fff}
.js--entry-selected .entry__info{color:#fff;border-color:#fff}
А нужно, чтобы он срабатывал только по клику на button
Казалось бы, всё просто - вешаю клик не на .entry__item, а на .entry__btn и вместо this пишу $('.entry__item'). Но почему-то так не работает. Подскажите, как переписать правильно?
Ответ
A зачем вы мешаете jquery и javascript? Чтото одно уже б использовали.
$('.entry__btn').click(function() {
let parent = $(this).closest('.entry__item');
parent.toggleClass('js--entry-selected');
});
.entry__item {
width: 158px;
padding: 20px 13px 21px;
margin-bottom: 5px;
margin-left: 5px;
display: inline-block;
text-align: center;
background: 0 0;
border: 2px solid #a8a8a8
}
.entry__name {
margin-bottom: 5px;
font-size: 17px;
font-weight: 700;
word-wrap: break-word
}
.entry__country {
position: relative;
display: block;
margin-bottom: 30px;
font-size: 14px;
font-weight: 300
}
.entry__country::after {
content: "";
position: absolute;
bottom: -13px;
left: 50%;
width: 96px;
height: 1px;
margin-left: -48px;
display: block;
background: #a8a8a8
}
.entry__btn,
.entry__btn:focus {
display: inline-block;
padding: 11px 20px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
background: #a8a8a8;
color: #fff;
border-bottom: 4px solid #757575;
border-radius: 3px;
text-decoration: none;
}
.entry__btn:hover {
background: #cc0001;
border-color: #B40001;
text-decoration: none;
color: #fff;
}
.entry__btn:active {
background: #B40001;
border-color: #B40001;
text-decoration: none;
color: #fff;
}
.entry__info {
font-size: 16px;
font-weight: 300;
color: #000;
border-bottom: 1px solid #000;
}
.js--entry-selected {
background: #cc0001;
color: #fff!important;
border-color: #fff
}
.js--entry-selected .entry__country::after {
background: #fff
}
.js--entry-selected .entry__info {
color: #fff;
border-color: #fff
}
Комментариев нет:
Отправить комментарий