0

这是作为简单的 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 转到 choic i 购物车的 HTML Div 元素。

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

例如：$('cart-product).find('quantity').html(iiitemquanitity); 像这样的东西，其中 eThe 值可以被写入。追加没有成功。

请帮忙

4

1 回答 1

1

与其按照您描述的方式执行 DOM 操作，不如研究一下micro-templateing。

一些流行的库：

这是一种为您的 HTML 定义模板的方法（这样代码会被浏览器加载忽略，也使用 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));
于 2013-10-15T01:57:51.213 回答