我有以下代码添加和删除一个类。但我希望在处于活动状态时在图像上添加另一个类,并在处于非活动状态时将其删除。问题是我可以添加,但是对于所有元素都将是活动的,不仅仅是打开的那个元素。有没有人知道如何解决这个问题?
https://jsfiddle.net/bmhv3edw/3/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(".plus").attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
答案 0 :(得分:1)
<强>更新:强>
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).find('img').attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass("active");
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
/* body{ background: black }; */
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text" href="#answer-52"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 1</div>
<div id="answer-52" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text" href="#answer-53"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 2</div>
<div id="answer-53" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
</div>