jquery - 追加多个变量

我有这张桌子：

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

我想在表中添加一些功能：

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 );
});

这是工具栏和链接。工具栏应附加在鼠标输入上，并且内部具有链接。

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

toolbar.html( gmaps );

链接类型更多。我像这样

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

如何添加更多链接类型？

toolbar.html( gmaps + google );

不起作用这是codepen

最佳答案

您需要对代码进行一些修改，如下所示：

1）通过$.clone()创建多重链接对象，以避免覆盖相同的DOM元素，例如：

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

2）在将这些链接添加到toolbar时；进行$.append()函数调用，以便将其附加到同一容器的底部，如下所示：

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

请在更新的代码笔链接中查看完整的源代码：

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

关于jquery - 追加多个变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38095799/