$(document).ready(function(){
var parags = $("#contests ul li p");
$("#contests ul li span a").each(function(i){
var parag_count = i;
$(this).toggle(
function(){
parags.eq(parag_count).css("background", "yellow");
return false;
},
function(){
parags.eq(parag_count).css("background", "none");
return false;
}
);
});
});
An alternative (just one of many) ...
$(document).ready(function(){
var paras = $("#contests ul li")
.find('span a').each(function(i){
var indx = i;
$(this).toggle(
function(){ return paraBg(indx, 'yellow'); }
, function(){ return paraBg(indx, 'none'); } );
}).end().find('p')
, paraBg = function(indx, bg){
paras.eq(indx).css("background", bg);
return false;
};
});
(untested)
On May 27, 5:12 pm, bobh <[EMAIL PROTECTED]> wrote:
> hi,
>
> I'm encountering a problem with a variable in a toggle event.
>
> see my example online here:http://www.allnighters.net/jq-issue/
>
> my js code:
>
> $(document).ready(function(){
> $("#contests ul li span a").toggle(
> function(){
> var parag_count = $("#contests ul li span
> a").index(this);
> alert(parag_count);
> $("#contests ul li p:eq("+ parag_count
> +")").css("background",
> "yellow");
> return false;
> },
> function(){
> $("#contests ul li p:eq("+ parag_count
> +")").css("background",
> "none");
> return false;
> }
> );
>
> });
>
> and my html:
> <div id="contests" style="width: 400px; margin-left: 20px;">
> <ul>
> <li class="uneven">
> <span><a href="#">4x2 Karma Hotel Tickets</a></span>
> <p>Deze wedstrijd loopt af op 23 April om 23u.</p>
> </li>
> <li class="even">
> <span><a href="#">5x2 F*uck Lany... Here's Stephan
> Bodzin</a></span>
> <p>Deze wedstrijd loopt af op 23 April om 23u.</p>
> </li>
> ...
> </ul>
> </div>
>
> the problem is that I don't know how to pass the 'parag_count'
> variable on to the 2nd function of the toggle event.
>
> thanks in advance.
