HTML巧妙的type="hidden"和display: none

type="hidden"用于input,display: none可用于其他DOM,与js联用可以巧妙地达到目的。

比如我在使用simplecart时想要在cartitems里显示item的缩略图(item_image)和页面url(item_link),那么在

<div class="simpleCart_shelfItems">

这个DOM中可以加入(以Hugo为例):

<img style="display:none;" class="item_image img-responsive" src="{{.thumb}}"/>
<span style="display: none;" class="item_link">{{ .Permalink }}</span>

并修改simplecart.js中:

{view: function (item, column) {
    return"<img src='"+item.get("image")+"'>";},
{attr: "name", label: "Name", view: function (item, column) {
    return "<a href='" + item.get("link") + "'>" + item.get(column.attr) + "</a>"; 
}},

如果我们想把cartitems DOM内容传递到form中并发送(post)出去:

<input type='hidden' name='Order' id='getcartitems'></input>

并加上js get内容:

<script type="text/javascript">
setInterval(function () {
  document.getElementById("getcartitems").value = document.getElementById("cartitems").innerHTML;
}, 5);
</script>
Z. Lu avatar
Z. Lu
Data scientist, bioinformatician, retro fan and web lover.
comments powered by Disqus