如何在jQuery中添加onClick状态?

时间:2015-07-28 14:12:31

标签: javascript jquery css3

我有以下代码添加和删除一个类。但我希望在处于活动状态时在图像上添加另一个类,并在处于非活动状态时将其删除。问题是我可以添加,但是对于所有元素都将是活动的,不仅仅是打开的那个元素。有没有人知道如何解决这个问题?

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();
});
});

1 个答案:

答案 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>