jQuery Probleme

Question

Unten stelle ich Ihnen einen Code vor, der komplett von mir geschlachtet wurde.

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

Ich weiß, es ist schrecklich. Es ist im Grunde wie Pseudocode jetzt. Könnte mir jemand helfen, mein Chaos in tatsächlich funktionierenden Code umzuschreiben?

Grundsätzlich für jede Klasse namens div, sollte die Variable Antwort an das Ende dieses div anhängen, und bei mouseout, entfernen Sie die Variable Antwort. Die Variable time wird vom Titel des Rollover-DIV abgerufen und beeinflusst somit, was in dem neuen DIV angezeigt wird, das hinzugefügt wird. Die ID des .gig sollte einfach in die URL übernommen werden.

Die Hover-Antwort-Funktionen zum Hinzufügen/Entfernen funktionieren einzeln, aber ich kann sie nicht mit den Variablen if und new in die neue Funktion einfügen.

Vielen Dank.

Answer 1

Dieser Teil sprang auf mich heraus: . id . - Sie nicht Zeichenketten mit . in Javascript, Sie verwenden +.

Die Tatsache, dass Sie diesen Code mit diesem Fehler geschrieben haben, sagt mir, dass A) Sie einen glanzlosen Editor haben, und/oder B) Sie debuggen nicht Ihr Javascript mit einem Werkzeug wie Firebug. Sie sollten wahrscheinlich darauf kommen. :)

Sie versuchen auch, die zwei Funktionsargumente des Schwebeflugs falsch zu verwenden, wie Sie Ihren ganzen Code in eine riesige Funktion setzen und dann nur zwei anonyme Funktionen deklarieren (ich bin nicht einmal sicher, dass die Syntax funktioniert?)

Unten ist eine korrekte (soweit Syntax und was ich denke die Logik ist) Version Ihres Codes. Mach einen Wirbel.

$(".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 2

EDIT

Sie haben Ihre Frage editierte. Ich denke, das sollte das tun, was Sie wollen:

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

Sie es verbessern konnte, obwohl einige Caching für die DOM-Knoten Erstellung verwenden, etwa so:

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

Das wird jedoch nur preformance verbessern, wenn der Benutzer schwebt oft über den .gig Elementen.

Answer 3

Persönlich würde ich es onDOMReady für jedes Element initialisieren, anstatt auf Hover. Aber Sie können das tun, wie Sie es wünschen. Folgendes würde ich tun.

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