Apend mehrere Variablen

Question

Ich habe diese Tabelle bekam:

<table> 
    <tr> 
    <th>Name</th> 
    <td>Paul Stevenson</td> 
    </tr> 
    <tr> 
    <th>Date</th> 
    <td>28. 09. 1978</td> 
    </tr> 
</table> 

Und ich möchte einige Funktionen zu meinem Tisch hinzuzufügen:

var toolbar = $("<div />").css({ 
    "padding": "5px", 
    "background" : "#F8F8F8", 
    "position" : "absolute", 
    "borderRadius" : "5px", 
}) 
var link = $("<a />").css({ 
    "display" : "block", 
    "height" : "17px", 
    "width" : "17px", 
    "position" : "relative"}).on("click", function() { 
    $(this).animate({bottom: "-2px"}, 20).animate({bottom: "0"}, 20); 
}); 

Hier Symbolleiste und Link. Die Symbolleiste sollte an die Eingabe der Maus angehängt werden und sie enthält einen Link.

$('th').on("mouseenter mouseleave", function(e) { 
      if (e.type === 'mouseenter') { $(this).append(toolbar); } 
      else { $(this).find($("div")).remove() } 
     }); 

toolbar.html(gmaps); 

Es gibt mehr Arten von Verbindungstypen. Ich mache es so

var gmaps = link.css({ "background" : "red",}); 
var google = link.css({"background" : "blue",}); 

Wie kann ich mehr Verknüpfungstypen anhängen?

toolbar.html(gmaps + google); 

Funktioniert nicht. Hier ist codepen

Answer 1

Sie müssen einige Änderungen an Ihrem Code vornehmen wie folgt:

1) Erstellen Sie das mehrere Verbindungsobjekt über $.clone() zu vermeiden gleichen DOM-Element zu überschreiben wie:

var gmaps = link.clone().css({ "background" : "red",}); 
var google = link.clone().css({"background" : "blue",}); 

2) Während Hinzufügen dieser Links zu toolbar; geht für $.append() Funktionsaufruf, so dass es an der Unterseite des gleichen Containers angehängt erhält wie folgt:

toolbar.append(gmaps).append(google); 

Bitte haben Sie einen Blick auf vollständige Quellcode auf aktualisiert codepen Link:

http://codepen.io/anon/pen/Mepzxd?editors=0010