Question

这是作为简单的jquery Store Cart功能创建的。但是，我并不是那么干净，因为我无法动态显示数据来纠正HTML5元素（div）。

这个附加代码很糟糕，但有效。我随时修改它，中断给出数量的NaN值

        $('#left_bar .cart-info').append('<dt class="clearfix first_item last_item" id="each-'+thisID+'"><span class="quantity-formated" ><span class="shop quantity">1</span>x</span><div class="label">'+itemname+'</div><div class="shop price"> $<em>'+itemprice+'</em></div><span class="shop quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></dt>');

我真的想让jquery vars转到选购我购物车的HTML Div元素。

任何人都可以看看这个并告诉我如何实现这一点。

ex：$（'cart-product）.find（'quantity'）。html（iitemquanitity）;像这样的东西，价值可以写。追加没有成功。

请帮助

Answer 1

不应按照您描述的方式执行DOM操作，而应该查看micro-templating。

一些受欢迎的图书馆：

这是一种为HTML定义模板的方法（这样浏览器onload也会忽略代码，也使用ERB样式分隔符）：

<script type='text/html' id='tmpl-item'>
    <dt class="clearfix first_item last_item" id="each-<%= thisID %>">
       <span class="quantity-formated">
           <span class="shop quantity"> <%= itemquantity %> </span> x
       </span>
       <div class="label"><%= itemname %></div>
       <div class="shop price"> $<em><%= itemprice %></em> </div>
       <span class="shop quantity"><%= itemquantity %></span>
       <img src="remove.png" class="remove">
       <br class="all" />
    </dt>
</script>

以下是渲染模板的方法：抓取该模板并传递上下文（某些值）以替换它们。

var tmplHTML = document.getElementById('tmpl-item').innerHTML;

// rudimentary example 
// high level idea -> get the template HTML and replace variables
var html = tmplHTML.replace('<%= itemname %>', itemname);
html = html.replace('<%= itemprice %>',itemprice);
html = html.replace('<%= thisID %>',thisID);
html = html.replace('<%= itemquantity %>', itemquanity);
$('#left_bar .cart-info').append(html);

// with something like underscore, where an object is 
// evaluated as part of the template rendering process
// and your template is free form JS
var tmpl = _.template(tmplHTML);
var vals = { itemname: 'test', itemprice: '20', thisID: 'test', itemquanity: 1 };
$('#left_bar .cart-info').append(tmpl(vals));

拆分此追加消息

1 个答案: