基于jQueryHTML5添加到购物车代码

<header>        <h1>Quick Add to Cart</h1>    </header>    <a href="#0" class="cd-cart">        <span>0</span>    </a>    <ul class="cd-gallery">        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li><img src="img/thumb-1.jpg" alt="PReview image"></li>                        <li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color selected-2" data-type="select">                        <ul>                            <li class="color-1">color-1</li>                            <li class="color-2 active">color-2</li>                            <li class="color-3">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color" data-type="select">                        <ul>                            <li class="color-1 active">color-1</li>                            <li class="color-2">color-2</li>                            <li class="color-3">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li><img src="img/thumb-1.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li class="selected"><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color selected-3" data-type="select">                        <ul>                            <li class="color-1">color-1</li>                            <li class="color-2">color-2</li>                            <li class="color-3 active">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color" data-type="select">                        <ul>                            <li class="color-1 active">color-1</li>                            <li class="color-2">color-2</li>                            <li class="color-3">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li><img src="img/thumb-1.jpg" alt="Preview image"></li>                        <li class="selected"><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color selected-2" data-type="select">                        <ul>                            <li class="color-1">color-1</li>                            <li class="color-2 active">color-2</li>                            <li class="color-3">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>        <li>            <div class="cd-single-item">                <a href="#0">                    <ul class="cd-slider-wrapper">                        <li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-2.jpg" alt="Preview image"></li>                        <li><img src="img/thumb-3.jpg" alt="Preview image"></li>                    </ul>                </a>                <div class="cd-customization">                    <div class="color" data-type="select">                        <ul>                            <li class="color-1 active">color-1</li>                            <li class="color-2">color-2</li>                            <li class="color-3">color-3</li>                        </ul>                    </div>                    <div class="size" data-type="select">                        <ul>                            <li class="small active">Small</li>                            <li class="medium">Medium</li>                            <li class="large">Large</li>                        </ul>                    </div>                    <button class="add-to-cart">                        <em>Add to Cart</em>                        <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">                            <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11" />                        </svg>                    </button>                </div> <!-- .cd-customization -->                <button class="cd-customization-trigger">Customize</button>            </div> <!-- .cd-single-item -->            <div class="cd-item-info">                <b><a href="#0">Product Name</a></b>                <em>$9.99</em>            </div> <!-- cd-item-info -->        </li>    </ul> <!-- cd-gallery -->    <script src="js/jquery-2.1.4.js"></script>    <script src="js/main.js"></script> <!-- Resource jQuery -->