Jadual Kandungan
回复内容:
点进去看看文档稍有JQ基础都可以做出你想要的效果。
Rumah pembangunan bahagian belakang tutorial php jquery 一个标签选择的实现 请教请教

jquery 一个标签选择的实现 请教请教

Jun 06, 2016 pm 08:33 PM
html5 jquery php

现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
jquery  一个标签选择的实现    请教请教

标签都是span元素,“选择标签”那一栏是个input。

这个效果该怎么实现呢?请教jquery高手 ,谢谢 ~

回复内容:

现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
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>
Salin selepas log masuk

采用组件化的思想重新写一个

<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>
Salin selepas log masuk

由于涉及到数据操作和this绑定,和underscore结合起来使用会比较好点,以上代码仅供参考!

大概要做这么几件事:

<code>1.定义显示被选中的标签的函数
2.在每个标签上设置点击事件
</code>
Salin selepas log masuk

在每次点击标签的时候,把当前的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>
Salin selepas log masuk

span中的值赋值给input久做好了,但是如果在input点击后取消显示就有一些复杂了,你需要定制一些样式,最起码input中的值可以点击并且触发事件。我就说这么多,起到抛砖引玉的作用。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

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

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

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

7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini 7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini Nov 13, 2024 am 09:42 AM

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

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

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

Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Apr 05, 2025 am 12:04 AM

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,

Program PHP untuk mengira vokal dalam rentetan Program PHP untuk mengira vokal dalam rentetan Feb 07, 2025 pm 12:12 PM

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

Terangkan pengikatan statik lewat dalam php (statik: :). Terangkan pengikatan statik lewat dalam php (statik: :). Apr 03, 2025 am 12:04 AM

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 Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan? Apakah kaedah Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan? Apr 03, 2025 am 12:03 AM

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.

See all articles