jquery實(shí)現(xiàn)淘寶詳情頁選擇套餐
更新時(shí)間:2022年03月09日 08:17:48 作者:面壁思過程
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶詳情頁選擇套餐,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)淘寶詳情頁選擇套餐的具體代碼,供大家參考,具體內(nèi)容如下
代碼相關(guān):
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <meta http-equiv="X-UA-Compatible" content="ie=edge"> ? ? <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> ? ? <title>Document</title> ? ? ? ? <style> ? ? .row{ ? ? ? } ? ? .box{ ? ? ? display: flex; ? ? ? flex-wrap: nowrap; ? ? ? } ? ? .span{ ? ? ? display: inline-block; ? ? ? margin-right: 10px; ? ? ? background: #313131; ? ? ? color: #fff; ? ? ? padding: 0 10px; ? ? } ? ? .span.active{ ? ? ? background: red; ? ? } ? ? </style> </head> <body> ? ? <div class="page"> ? ? ? <div class="row"> ? ? ? ? <p class="tittle"></p> ? ? ? ? <div class="box"> ? ? ? ? ? <div class="span"></div> ? ? ? ? </div> ? ? ? </div> ? ? </div> ? ? <br> ? ? <br> ? ? <br> ? ? <br> ? ? ? <button class="submit">提交</button> </body> <script> ? var attr=[]; ? var json=[{title:'娃娃機(jī)尺寸',parmas:[20]},{title:'娃娃機(jī)顏色',parmas:['白色']},{title:'娃娃機(jī)版本',parmas:['新版','舊版']}] ? var html=''; ? for(let i=0;i<json.length;i++){ ? ? var childhtml=''; ? ? for(let j=0;j<json[i].parmas.length;j++){ ? ? ? childhtml+='<div class="span " ?data-row='+i+'>'+json[i].parmas[j]+'</div>' ? ? } ? ? html+='<div class="row"><p class="tittle">'+json[i].title+'</p> <div class="box">'+childhtml+'</div></div></div>' ? } ? ? $('.page').html(html);? ? ? $(' .page').on('click', '.span', function (event) { ? ? var value=$(this).text(); ? ? var row=event.currentTarget.dataset.row; ? //第幾行 ? ? //先判斷值是否存在 存在設(shè)為空 ? ? // console.log(attr.indexOf(value)) ? ? if(attr.indexOf(value)>-1){ ? ? ? attr[row]=''; ? ? ? $(this).removeClass('active') ? ? }else{ ? ? ? attr[row]=value; ? ? ? $(this).addClass('active'); ? ? ? $(this).siblings().removeClass('active') ? ? } ? ?? ? ? console.log(attr) ? }); ? ? $('.submit').click(function(){ ? ? if(attr.length!=3){ ? ? ? ? alert('請(qǐng)把套餐填寫完整'); ? ? ? ? return; ? ? } ?? ? ? ? for(let i=0;i<attr.length;i++){ ? ? ? ? if(attr[i]==''||attr[i]==undefined||attr.length!=3){ ? ?? ? ? ? ? alert('請(qǐng)把套餐填寫完整'); ? ? ? ? return; ? ? ? } ? ? } ? ? console.log('這是最終提交的值'+attr.join(',')) ? ? }) ? ? </script> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
無需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本,在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用,在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中,當(dāng)點(diǎn)擊文本框時(shí),會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
這篇文章主要介紹了jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow(),需要的朋友可以參考下2015-08-08jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
有一段時(shí)間沒用jquery了,今天又碰到這個(gè)問題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。2011-08-08輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法
wrap()能夠?qū)⒅付℉TML元素包裹DOM結(jié)構(gòu),與之相反unwrap()函數(shù)則是將DOM去掉^^下面讓我們來以兩個(gè)小例子輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法:)2016-05-05