js仿微信公眾平臺(tái)打標(biāo)簽功能
今天剛剛完成了一個(gè)小功能:“仿微信公眾平臺(tái)的-打標(biāo)簽”,隨筆記下歡迎糾錯(cuò):
操作介紹:選擇人物列表點(diǎn)擊“打標(biāo)簽”按鈕可實(shí)現(xiàn)對(duì)當(dāng)前已選擇的人物添加新的標(biāo)簽;
自己分析的實(shí)現(xiàn)思路:
1.點(diǎn)擊“打標(biāo)簽”時(shí)要“知道”那些人物被選擇了~~遍歷當(dāng)前人物列表
2.得到被選擇人物列表后還得知道他們下面的標(biāo)簽都有啥~~遍歷選擇人物的標(biāo)簽列表
3.得到當(dāng)前可以使用的標(biāo)簽列表~~額..還是遍歷得到
廢話講的有點(diǎn)多。來幾張圖片壓壓驚。網(wǎng)頁(yè)效果\(^o^)/~
1.加載完畢的初期“打標(biāo)簽”不可選沒有功能。。
2.當(dāng)任務(wù)列表有選擇的時(shí)候可以點(diǎn)擊“打標(biāo)簽”并彈窗顯示可編輯的標(biāo)簽列表(列表內(nèi)容取自右側(cè));
3.選擇標(biāo)簽后確定修改當(dāng)前已選擇的人物的標(biāo)簽;



概流程就這樣了,代碼:
基本也頁(yè)面結(jié)構(gòu):

html和css大家都會(huì)的就不寫啦。。。下面是主要js代碼:
function addLabel (){
$('.addLabel_divS_ul_s').find('li').remove();
$('#addLable_btn').css({'cursor':'pointer',"background":'#fff'});
$('#addLable_btn').on('click',function(){
// 向隱藏ul(即彈窗里的ul)中添加li
var $lis = $('.ulLabelS>.lable_list_li_append_li>.lable_list_li_strong_2'),
$addLabelDivSUlS = $('.addLabel_divS_ul_s'),
$inputAll = $('#queryPageForm input[type="checkbox"]'),
$inputLength = $inputAll.length;//人物列表
//循環(huán)已有的li列表放進(jìn)備選ul中
for(let i=0 ; i<$lis.length; i++){
var $li = "<li class='addLabel_divS_ul_sLi' ><input type='checkbox'/>" + $($lis[i]).text() + "</li>";
//防止多次執(zhí)行函數(shù)導(dǎo)致的多次添加
if($addLabelDivSUlS.find('li').length != $lis.length){
//console.log('zhixing ');
$addLabelDivSUlS.append($li);
};
}
//循環(huán)已勾選的人物列表讀取已有的標(biāo)簽反顯到備選ul的li中(li里面的input勾選)
for(let i=0; i< $inputLength; i++){
//判斷當(dāng)前人員列表是否被勾選 勾選的添加標(biāo)簽
if($($inputAll[i]).prop('checked')){
//$length : 人物固有標(biāo)簽的長(zhǎng)度
var $thisLi = $($inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul>li');
$length = $thisLi.length;//備選標(biāo)簽ul
for(let j = 0; j < $length ; j ++ ){
//console.log($($thisLi[j]).text());
for(let k = 0; k < $addLabelDivSUlS.find('li').length ; k++){
if($($thisLi[j]).text() == $($addLabelDivSUlS.find('li')[k]).text()){
$($addLabelDivSUlS.find('li')[k]).find('input').prop('checked',true)
}
}
}
}
};
$('#addLabel_divS_wrp').show();
$('#addLabel_divS').show();
});
}
上面是獲取備選標(biāo)簽和“找到”選中的人物中的標(biāo)簽列表并在備選標(biāo)簽中進(jìn)行勾選,當(dāng)彈窗后我們還得知道當(dāng)前人物列表哪個(gè)是選中的,我們?cè)诎堰x中的備選標(biāo)簽添加到當(dāng)前選中的人物上,就實(shí)現(xiàn)修改標(biāo)簽的功能了。。。。??聪旅妗?。。。
/*
* 取消 確定
*/
function clickBtnS (){
var $addLabelDivS = $('#addLabel_divS'),
inputAll = $('#queryPageForm input[type="checkbox"]');
//確定
$('.addLabel_divS_div1>.btn1').on('click',function(){
var $length = $('.addLabel_divS_ul_s>.addLabel_divS_ul_sLi');//備選標(biāo)簽ul
//找到勾選的li 添加當(dāng)前勾選的標(biāo)簽 人物列表
for(let i=0; i< inputAll.length; i++){
//判斷當(dāng)前人員列表是否被勾選 勾選的添加標(biāo)簽
if($(inputAll[i]).prop('checked')){
$(inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul').empty();
//循環(huán)已選擇的li
for(let j = 0; j<$length.length;j ++){
if($($length[j]).find('input').prop('checked')){
//console.log($($length[j]).text());
var $li = "<li class='div2_lable_li'>"+ $($length[j]).text() +"</li>";
$(inputAll[i]).parent('.user_list_li_div_1').siblings('.user_list_li_div_2').find('.div2_lable_ul').append($li);
}
}
}
};
$('.addLabel_divS_ul_s').find('li').remove();
$('#addLabel_divS_wrp').hide();
$addLabelDivS.hide();
});
//取消
$('.addLabel_divS_div1>.btn2').on('click',function(){
$('.addLabel_divS_ul_s').find('li').remove();
$('#addLabel_divS_wrp').hide();
$addLabelDivS.hide();
});
};
至此就可以實(shí)現(xiàn)和微信的打標(biāo)簽相同的效果了。。也沒看微信的源碼不知道人家這么寫的。。自知這個(gè)實(shí)現(xiàn)思路for循環(huán)有點(diǎn)多性能肯定不好(先實(shí)現(xiàn)功能在優(yōu)化嘛。。嘿嘿)。。求指教哦。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析
大家心里是否產(chǎn)生過這樣的疑問,JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2022-11-11
用js限制網(wǎng)頁(yè)只在微信瀏覽器中打開(或者只能手機(jī)端訪問)
這篇文章主要介紹了用js限制網(wǎng)頁(yè)只在微信瀏覽器中打開,很多電影站也是這么限制的,原因你懂的,需要的朋友可以參考下2020-01-01
JavaScript變量中var,let和const的區(qū)別
這篇文章主要介紹了JavaScript變量中var,let和const的區(qū)別,JavaScript中一共有3種用來聲明變量的關(guān)鍵字,分別是var、let和const,文章通過圍繞主題展開對(duì)三個(gè)關(guān)鍵詞的詳細(xì)介紹,需要的朋友可以參考一下2022-09-09
JavaScript實(shí)現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中,將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個(gè)常見的需求。本篇博客將介紹五種常用的方法來實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu),希望對(duì)大家有所幫助2023-03-03
淺談?lì)愃朴?function(){}).call()的js語(yǔ)句
這篇文章主要介紹了淺談?lì)愃朴?function(){}).call()的js語(yǔ)句,的相關(guān)資料,需要的朋友可以參考下2015-03-03
javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JS中隊(duì)列和雙端隊(duì)列實(shí)現(xiàn)及應(yīng)用詳解
這篇文章主要介紹了JS中隊(duì)列和雙端隊(duì)列實(shí)現(xiàn)及應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09

