工作笔记2：关于MUI选择器的使用及使用for循环筛选对于元素

//默认价格选择function addPrice(){//定义一个mui选择器对象var picker=new mui.PopPicker();//设置对象中的内容，数组形式picker.setData([{value:'add1',text:'≥0.50元'},{value:'add2',text:'≥0.60元'},{value:'add3',text:'≥0.70元'},{value:'add3',text:'≥0.80元'},]);//选择器回调函数 设置将选择的值放入span中picker.show(function(selectPrice){var chosenP=selectPrice[0].text;$('#chooseP').text(chosenP);//mui.alert(chosenP);//          输出下方内容            var price=parseInt(chosenP.replace(/[^0-9]/ig,""));            var aryb=[];            $('.open_ad .jst').each(function(){            aryb.push($(this).text())            })//筛选下方数组 并修改样式var total=$('.open_ad').find('.jst').length;//alert(total);//循环并判断下方内容匹配程度  不匹配修改样式for(i=0;i<total;i++){var pData=parseInt(aryb[i].replace(/[^0-9]/ig,""));$('.open_ad .jst').eq(i).removeClass('yj');$('.kqan').eq(i).css('background','#0062CC').text('开启');if(price>=pData){$('.open_ad .jst').eq(i).addClass('yj');$('.kqan').eq(i).css('background','#D43F3A').text('未开启');}else{//$('.open_ad .jst').eq(i).css('color','#007AFF');}}});}

引用了一个mui的选择器方法。并将选择器的内容与下方数据对比进行判断。修改对应内容。

mui的picker选择器调用时最核心的环节是创建一个mui.PopPicker对象。然后对其进行操作。使用setData（）方法进行添加数据。mui封装了很大一部分数据，使得点击事件选择相应内容的操作变得简单。只使用show（）方法中回调函数中的参数数组就可以实现了。

下方是一个正则的判断，将数据中的数字部分取出来，与页面下部分的div内容进行比对。实现用户点击选择默认的价格后，自动筛选掉一些不匹配的价格。