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('請把套餐填寫完整');
? ? ? ? return;
? ? } ??
?
? ? for(let i=0;i<attr.length;i++){ ?
? ? ? if(attr[i]==''||attr[i]==undefined||attr.length!=3){ ? ??
? ? ? ? alert('請把套餐填寫完整');
? ? ? ? return;
? ? ? }
? ? }
? ? console.log('這是最終提交的值'+attr.join(','))
?
? })
?
?
</script>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: