JQuery issues
Below I present to you the code that was completely killed by me.
$(".gig").hover(function() {
var id = $(this).attr("id");
var time = $(this).attr("title");
function () {
if (time > 0)
{
var answer = $('<div class="roll">Are you attending? <a href="' + id + '">Yes</a></div>').hide();
}
else
{
var answer = $('<div class="roll">Did you attend?<a href="' + id + '">Yes</a> </div>').hide();
}
answer.appendTo($(this)).fadeIn("fast");
}
function () {
$(this).find("div:last").fadeOut("fast", function() {
$(this).remove()
});
}
});
I know this is terrible. Basically it looks like pseudocode. Can anyone help me rewrite my mess to actually working code?
Basically, for every class named div, it should add the variable response to the end of that div, and in mouseout, it should remove the variable response. The time of the variable will be fetched from the rollover div heading and thus affect what is shown in the newly added div. The .gig id should simply be passed in the URL.
The add / remove functions of the hover response are working on their own, but I cannot fit them into a new function with if and new variables.
Thank you very much.
a source to share
This part popped up to me: . id .
- You don't concatenate strings with .
in Javascript you are using +
.
The fact that you posted this code with this error tells me that A) you have a weak editor and / or B) you are not debugging your Javascript with a tool like Firebug . You should probably understand this. :)
You are also trying to misuse the two arguments of the hover function as you are putting all your code in one huge function and then just declaring two anonymous functions (I'm not even sure if the syntax works?)
Below is the correct (as far as syntax and what I think is the logic) version of your code. Give him a whirlwind.
$(".gig").hover(function () {
var id = $(this).attr("id");
if (time > 0) {
var answer = $('<div class="roll">Are you attending? <a href="' + id + '">Yes</a></div>').hide();
} else {
var answer = $('<div class="roll">Did you attend?<a href="' + id + '">Yes</a> </div>').hide();
}
answer.appendTo($(this)).fadeIn("fast");
}, function () {
$(this).find("div:last").fadeOut("fast", function() {
$(this).remove()
});
});
a source to share
EDIT
You have edited your question. I think this should do what you want:
$(".gig").hover(function() {
var $this = $(this);
var id = $this.attr("id");
var time = $this.attr("title");
var a = $('<a />').text('Yes').attr('href', id);
var div = ('<div />').addClass('roll');
if(time > 0){
div.text('Are you attending?');
} else {
div.text('Did you attend?');
}
var answer = div.append(a).hide();
answer.appendTo( this ).fadeIn('fast');
}, function(){
$(this).find("div.roll:last").fadeOut("fast", function() {
$(this).remove()
});
});
You can improve it by using some caching to create a DOM node, but here's something like this:
$(".gig").hover(function() {
var $this = $(this);
if(typeof $this.data('attendingLink') === 'undefined'){
var id = $this.attr("id");
var time = $this.attr("title");
var a = $('<a />').text('Yes').attr('href', id);
var div = ('<div />').addClass('roll');
if(time > 0){
div.text('Are you attending?');
} else {
div.text('Did you attend?');
}
var answer = div.append(a);
$this.data('attendingLink', answer);
} else {
var answer = $this.data('attendingLink');
}
answer.hide();
answer.appendTo( this ).fadeIn('fast');
}, function(){
$(this).find("div.roll:last").fadeOut("fast", function() {
$(this).remove()
});
});
This, however, will only improve pre-availability when the user hovers a lot over .gig elements.
a source to share
Personally, I initialized it onDOMReady for every element, not hover. But you can do it however you want. Here's what I will do.
$(function() {
$('.gig').each(function() {
id = $(this).attr('id');
time = $(this).attr('title');
answer = '<div class="roll">' +
(time > 0 ? 'Are you attending?' : 'Did you attend?') +
' <a href="' . id .'">Yes</a></div>';
$(this).append(answer);
}).hover(
function() { $('.roll', this).show('fast'); },
function() { $('.roll', this).hide('fast'); }
);
});
a source to share