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

比如我在使用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中：

1
2
3
4
5


{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内容：

1
2
3
4
5


<script type="text/javascript">
setInterval(function () {
  document.getElementById("getcartitems").value = document.getElementById("cartitems").innerHTML;
}, 5);
</script>