У меня проблема с моим кодом.Удалить класс другого элемента с помощью jQuery при нажатии элемента
В настоящее время класс .active
применяется, когда я нажимаю на divs, которые читают изображение ebook 1, ebook image 2, ebook image 3, как и предполагалось.
Что бы я хотел сделать, это удалить класс .active
, когда я нажимаю на сам div, который он сейчас не делает.
https://fiddle.jshell.net/aerandur/v20hmy3b/
$(document).ready(function() {
$('.one').on('click', function() {
$('.one').removeClass('active');
$id = "#" + $(this).addClass('active').attr('data-id');
$('.two:not(' + $id + ')').hide();
$($id).slideToggle();
});
});
/* .container {
margin: 0 auto;
}
.frame {
max-width: 940px;
margin: 0 auto;
}
*/
.one {
top: 0;
background-color: lightblue;
z-index: 1;
padding: 25px 10px;
width: 30%;
min-width: 200px;
display: inline-block;
cursor: pointer;
}
.two {
background-color: yellow;
z-index: -1;
display: none;
}
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever-you-wanna-name top-product-list-ebbok">
<div class="frame">
<div class="c-3 one" data-id="p1">ebook image 1</div>
<div class="c-3 one" data-id="p2">ebook image 2</div>
<div class="c-3 one" data-id="p3">ebook image 3</div>
</div>
</div>
<div class="whatever-you-wanna-name top-product-list-description">
<div class="frame">
<div class="two" id="p1">ebook for content image 1</div>
<div class="two" id="p2">ebook for content image 2</div>
<div class="two" id="p3">ebook for content image 3</div>
</div>
</div>
Вы имеете в виду удалить '' .active' из .one' при нажатии '.two'? – Rhumborl
Здесь вы добавили тег toggleClass. Возможно, вы захотите [посмотреть, как это работает] (http://api.jquery.com/toggleClass) ... –