jQuery problems

Question

Hello guys,

Below I present you some code which has completely been butchered 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, it is terrible. It basically is like pseudocode now. Could anyone help me to re-write my mess into actually functioning code?

Basically for every class named div, it should append the variable answer onto the end of this div, and on mouseout, remove the variable answer. The variable time will be fetched from the title of the rollover div, and thus affect what is shown in the new div that is added. The id of the .gig should simply be passed into the url.

The hover answer add/remove functions work on their own, but I am unable to place them into the new function with the if and new variables.

Thank you so much.

Answer 1

EDIT

You have editted 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 could improve it using some caching for the DOM node creation though, 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()
    });
});

That will however only improve preformance when the user hovers over the .gig elements a lot.

Answer 2

This part jumped out at me: . id . - You don't concantenate strings with . in Javascript, you use +.

The fact you posted this code with that mistake tells me that A) you have a lackluster editor, and/or B) you don't debug your Javascript using a tool like Firebug. You should probably get on that. :)

You are also trying to use the hover's two function arguments incorrectly, as you put all your code in one huge function and then just declare two anonymous functions (I'm not even sure that syntax works??)

Below is a correct (as far as syntax and what I think the logic is) version of your code. Give it a whirl.

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

Answer 3

Personally, I'd initialize it onDOMReady for each element, rather than on hover. But you can do that how you wish. Here's what I'd 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'); }
  );
});