我有这张 table :
<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) 将这些链接添加到工具栏
时;进行 $.append()
函数调用,以便将其附加到同一容器的底部,如下所示:
toolbar.append( gmaps ).append( google );
请在更新的 codepen 链接中查看完整的源代码:
关于jquery - 附加多个变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38095799/