I'm slowly getting up to speed with jQuery and am starting to want to abstract my code. I'm running into problems trying to define click
events at page load.
In
the code below, I'm trying to run through each div with
the 'block' class and add
events to some of its child elements by selecting them by class:
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$('HTML').addClass('JS'); // if JS enabled, hide answers
$(".block").each(function() {
problem = $(this).children('.problem');
button = $(this).children('.showButton');
problem.data('currentState', 'off');
button.click(function() {
if ((problem.data('currentState')) == 'off'){
button.children('.btn').html('Hide');
problem.data('currentState', 'on');
problem.fadeIn('slow');
} else if ((problem.data('currentState')) == 'on'){
button.children('.btn').html('Solve');
problem.data('currentState', 'off');
problem.fadeOut('fast');
}
return false;
});
});
});
</script>
<style media="all" type="text/css">
.JS div.problem{display:none;}
</style>
<div class="block">
<div class="showButton">
<a href="#" title="Show solution" class="btn">Solve</a>
</div>
<div class="problem">
<p>Answer 1</p>
</div>
</div>
<div class="block">
<div class="showButton">
<a href="#" title="Show solution" class="btn">Solve</a>
</div>
<div class="problem">
<p>Answer 2</p>
</div>
</div>
Unfortunately using this, only
the last of
the divs' button actually works.
The event is not 'localised' (if that's
the right word for it?) i.e.
the event is only applied to
the last $(".block") in
the each method.
So I have to laboriously add ids for each element and define my click
events one by one. Surely there's a better way! Can anyone tell me what I'm doing wrong? And how I can get rid of
the need for those IDs (I want this to work on dynamically generated pages where I might not know how many 'blocks' there are...)
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$('HTML').addClass('JS'); // if JS enabled, hide answers
// Preferred version DOESN'T' WORK
// So have to add ids to each element and laboriously set-up each one in turn...
$('#problem1').data('currentState', 'off');
$('#showButton1').click(function() {
if (($('#problem1').data('currentState')) == 'off'){
$('#showButton1 > a').html('Hide');
$('#problem1').data('currentState', 'on');
$('#problem1').fadeIn('slow');
} else if (($('#problem1').data('currentState')) == 'on'){
$('#showButton1 > a').html('Solve');
$('#problem1').data('currentState', 'off');
$('#problem1').fadeOut('fast');
}
return false;
});
$('#problem2').data('currentState', 'off');
$('#showButton2').click(function() {
if (($('#problem2').data('currentState')) == 'off'){
$('#showButton2 > a').html('Hide');
$('#problem2').data('currentState', 'on');
$('#problem2').fadeIn('slow');
} else if (($('#problem2').data('currentState')) == 'on'){
$('#showButton2 > a').html('Solve');
$('#problem2').data('currentState', 'off');
$('#problem2').fadeOut('fast');
}
return false;
});
});
</script>
<style media="all" type="text/css">
.JS div.problem{display:none;}
</style>
<div class="block">
<div class="showButton" id="showButton1">
<a href="#" title="Show solution" class="btn">Solve</a>
</div>
<div class="problem" id="problem1">
<p>Answer 1</p>
</div>
</div>
<div class="block">
<div class="showButton" id="showButton2">
<a href="#" title="Show solution" class="btn">Solve</a>
</div>
<div class="problem" id="problem2">
<p>Answer 2</p>
</div>
</div>
