jquery 一个标签选择的实现 请教请教
现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
标签都是span元素,“选择标签”那一栏是个input。
这个效果该怎么实现呢?请教jquery高手 ,谢谢 ~
回复内容:
现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
标签都是span元素,“选择标签”那一栏是个input。
这个效果该怎么实现呢?请教jquery高手 ,谢谢 ~
假定你这些标签的数据都是从后端渲染的,那么就会有相应的id和值,假设页面渲染出来是这个效果
<code><div class="container"> <div class="input-group input-group-sm"> <input type="text" class="form-control" id="input" readonly> <span class="input-group-addon" id="certainBtn">确定</span> </div> <div class="btn-group btn-group-sm mt" id="labels"> <span type="button" class="btn btn-default" data-id="1" data-value="公司运营">公司运营</span> <span type="button" class="btn btn-default" data-id="2" data-value="互联网营销">互联网营销</span> <span type="button" class="btn btn-default" data-id="3" data-value="组织变革">组织变革</span> <span type="button" class="btn btn-default" data-id="4" data-value="招聘/激励">招聘/激励</span> <span type="button" class="btn btn-default" data-id="5" data-value="品牌公关">品牌公关</span> <span type="button" class="btn btn-default" data-id="6" data-value="财务/法务">财务/法务</span> </div> </div> (function ($) { var $labels = $('#labels'); //标签栏 var $input = $('#input'); //输入框 var $certainBtn=$('#certainBtn'); //确定按钮 var data = {};//已选择的数据 var max = 3; //最多选择数目 var activeClass = 'btn-primary'; //选中的active样式 $labels.on('click', 'span', function () { var $this = $(this); var id = $this.data('id'); var value = $this.data('value'); var isSelected = $this.hasClass(activeClass);//是否被选中 //超过数目限制则不做处理 if (!isSelected && Object.keys(data).length >= max) { return; } isSelected ? delete data[id] : data[id] = value; $this.toggleClass(activeClass); renderInput(); }); $certainBtn.click(function () { console.log(data); }); function renderInput() { var values = []; for (var id in data) { values.push(data[id]); } $input.val(values.toString()); //with underscore //$input.val(_.values(data).toString()); } })(jQuery); </code>
采用组件化的思想重新写一个
<code>(function($){ var labelChoose = { el: { $labels: $('#labels'), $input: $('#input'), $certainBtn: $('#certainBtn') }, max: 3, data: {}, activeClass: 'btn-primary', init: function (defaultData) { var self = this; this.renderInit(defaultData); //初始化 this.el.$labels.on('click', 'span', function (e) { self.labelsClick(e); }); this.el.$certainBtn.on('click', function (e) { self.certainClick(e); }); }, labelsClick: function (e) { var $this = $(e.currentTarget); var id = $this.data('id'); var value = $this.data('value'); var isSelected = $this.hasClass(this.activeClass);//是否被选中 //超过数目限制则不做处理 if (!isSelected && Object.keys(this.data).length >= this.max) { return; } isSelected ? delete this.data[id] : this.data[id] = value; $this.toggleClass(this.activeClass); this.renderInput(); }, renderLabels: function () { var self = this; this.el.$labels.find('span').each(function () { var $this = $(this); var id = $this.data('id'); for (var idz in self.data) { if (idz === id.toString()) { $this.addClass(self.activeClass); } } }); }, renderInput: function () { var values = []; for (var id in this.data) { values.push(this.data[id]); } //with underscore //this.el.$input.val(_.values(this.data).toString()); this.el.$input.val(values.toString()); }, certainClick: function (e) { console.log(this.data); }, renderInit: function (defaultData) { this.data = defaultData || {}; this.renderLabels(); this.renderInput(); } }; labelChoose.init({ '1': '公司运营', '2': '互联网营销' }); })(jQuery); </code>
由于涉及到数据操作和this绑定,和underscore结合起来使用会比较好点,以上代码仅供参考!
大概要做这么几件事:
<code>1.定义显示被选中的标签的函数 2.在每个标签上设置点击事件 </code>
在每次点击标签的时候,把当前的this标签传到1的函数里,append到input的value里。
这种插件自己写的话会很麻烦 建议直接用插件去实现
给你说两个吧 都是我经常用到的:
select2 和 flatui(前端UI框架)
点进去看看文档稍有JQ基础都可以做出你想要的效果。
我再简单描述一下自己写代码要怎么实现:
input框里肯定是要有CSS和JS来控制的
span标签添加点击事件,点击后加个display:none
的style(并不是删除 方便在input中点击移除后重新展现)。
假定span有个id叫sp1 input的id叫show,大概的思路是这样的:
<code>$('#sp1').click(function(){ $(this).css('display','none'); //获取span中的值复制给input $('#show').val($(this).html()); }) </code>
span中的值赋值给input久做好了,但是如果在input点击后取消显示就有一些复杂了,你需要定制一些样式,最起码input中的值可以点击并且触发事件。我就说这么多,起到抛砖引玉的作用。

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,

Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6

Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.

Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.
