javascript - Bagaimana untuk melintasi fungsi dan kandungan elemen ditambah secara dinamik

Question

Seperti yang ditunjukkan dalam gambar: Fungsi yang perlu direalisasikan ialah mengklik butang tambah di bahagian atas dan secara dinamik menambah baris jadual di bahagian bawah, dan kemudian kandungan dalam setiap baris dilalui dari objek.
Kemudian saya hanya mempunyai baris yang ditulis dalam html pertama yang mempunyai kandungan dan fungsi.
Barisan yang keluar selepas klik butang tiada kandungan dan tiada fungsi. (Nota: Fungsi ini merujuk kepada lajur pertama dan lajur kedua saya, yang merupakan kesan kaitan peringkat kedua)

typecho · Answer

Pertama sekali, id hanya boleh muncul sekali dalam halaman dan unik Hanya kelas boleh muncul beberapa kali!

Kenyataan

id 为唯一属性，即一个 html 文件中只能出现一个对应的 id，class Anda boleh menggunakan berbilang

Realisasi keperluan

Bahagian hadapan, dari rangka kerja hingga ke fungsi, semuanya boleh diselesaikan menggunakan corak reka bentuk secara terang-terangan, semuanya boleh diselesaikan menggunakan MVC, seperti dalam contoh anda:

C -> Keseluruhan logik JS
V -> entri baris tunggal
M ->

Teruskan perbaiki skrip:

(function($) {
    'use strict';

    /**
     * 组件条目解析
     * 一行即一个组件条目，该构造方法
     * 例：var thisRow = new AppRow();
     * @return {object} 一个 jQuery 对象
     */
    var AppRow = function() {
        return this.rowParse(this.rowDom());
    };

    // HTML 结构
    AppRow.prototype.rowDom = function() {
        var row = '',
            options = AppRow.typeChose,
            optionYears = options[0].types;

        // 计算期类型
        row += '';

        // 期间
        row += '';

        // 征收方式
        row += '';

        return '' + row + '';
    };

    // 解析行结构，添加事件
    AppRow.prototype.rowParse = function(row) {
        var $row = $(row),
            $typeTime = $row.find('select.type'),
            $typeTypes = $row.find('.types'),
            optionsData = AppRow.typeChose;

        // 计算期类型
        $typeTime.on('change.app', $.proxy(function(e) {
            var val = $typeTime[0].value;
            $typeTypes.children().remove();
            $typeTypes.append(this.selectYears(val));
        }, this));

        return $row;
    };

    // 返回年度表单
    AppRow.prototype.selectYears = function(type) {
        var optionYears = AppRow.typeChose[0].types,
            select = '',
            $select = null;

        // 构建表单
        select += '';

        // 构建成 jQuery 对象
        $select = $(select);

        // 事件绑定
        $select.on({
            // 选择事件
            'change.app': $.proxy(function(e) {
                var val = $select[0].value,
                    $sub = $select.next('.sub');

                if (type <= 0) {
                    // 年终汇算无后续表单
                    return;
                }

                if (val === -1) {
                    // 未选择，则移除后续表单
                    $select.nextAll().remove();
                    return;
                }

                // 创建或或初始化后续表单
                if (!$sub.get(0)) {
                    // 表单不存在则创建
                    $select.after(this.selectSub(type, val));
                }
                $sub.trigger('reset.app');
            }, this),

            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 返回季度或月份表单
    AppRow.prototype.selectSub = function(type, year) {
        var optionData = AppRow.typeChose[type].types[year].zType_time1,
            select = '',
            $select = null;

        if (!optionData) {
            // 无数据
            return;
        }

        // 构建表单
        select += '';
        $select = $(select);

        // 事件绑定
        $select.on({
            // 重置表单
            'reset.app': $.proxy(function(e) {
                $select.find('option').prop('selected', false)
                    .eq(0)
                    .prop('selected', true);
            })
        });

        return $select;
    };

    // 联动数据 - zType_chose
    AppRow.typeChose = [{
        "name": "年终汇算",
        "types": [{
            "years": "2015年"
        }, {
            "years": "2016年"
        }]
    }, {
        "name": "预缴-月度",
        "types": [{
            "years": "2015年",
            "zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        }, {
            "years": "2016年",
            "zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        }]
    }, {
        "name": "预缴-季度",
        "types": [{
            "years": "2015年",
            "zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]
        }, {
            "years": "2016年",
            "zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]
        }]
    }];

    AppRow.VERSION = '1.0.0';

    // ===========================================

    // 添加按钮事件绑定
    var $addBtn = $('.button2'),
        $rowList = $('#zType_all');

    // 点击添加
    $addBtn.on('click.app', function(e) {
        // 或直接添加实例
        $rowList.append(new AppRow());
    });

})(jQuery);

Penjelasan

;
(function($){ /*code*/ })(jQuery);
；
$.fn.remove可以保证页面的数据的安全性，切忌使用 $.fn.hide juga boleh digunakan
untuk melanjutkan operasi pemadaman
AppRow.prototype.delete()Jika perlu guna
;
name 做数据提交，则需使用 name="row[index][name]" 的格式，如：name="row[1]['type']"、name="row[1]['year']"、name="row[1]['sub']"Kesan akhir:

Kesan dalam talian https://jsfiddle.net/kxjyo7fp...

某草草 · Answer

Letakkan kod untuk melintasi data dalam kaedah yang anda klik untuk menambah baris Penyelarasan khusus ialah cara menambah baris dan melintasi satu. Anda perlu melaksanakannya sendiri. Saya tidak melihatnya dengan teliti. Anda kini agak seperti elemen yang ditambah secara dinamik Anda mengikat acara, dan hasilnya terikat dalam HTML yang ditulis, tetapi elemen tambahan tidak terikat pada acara tersebut.

欧阳克 · Answer

Adalah disyorkan untuk menggunakan perpustakaan ui secara terus Untuk jquery, anda boleh memilih jadual easyui / bootstrap

学习ing · Answer

Pengikatan peristiwa akan berjaya diikat selepas pemaparan halaman selesai dan tidak akan diikat secara automatik selepas itu, iaitu, nod yang ditambahkan selepas halaman dipaparkan tidak boleh dijilidkan di sini ialah $('.a'). .click (...) Ini adalah kaedah yang serupa kerana apabila ia disusun buat kali pertama, acara akan terikat kepada kelas A pada halaman Jika anda secara dinamik mengkondisikan beberapa nod dengan kelas a dalam JS, kemudian menambahkannya kemudian tidak akan mempunyai kesan , kerana nod yang ditambahkan kemudian tidak wujud apabila mengikat buat kali pertama.
Penyelesaian adalah dengan menggunakan kaedah on() Contohnya, $('body').on('click','.a',fun(){}) Kaedah ini baik, kerana teg badan akan wujud. tidak kira bila. Oleh itu, tidak akan ada situasi di mana nod tidak dapat ditemui dan tidak boleh diikat.
Sudah tentu, anda juga boleh menulis fungsi pada nod sendiri, tetapi ini tidak disyorkan.

高洛峰 · Answer

Saya menulis semula sebahagian daripada skrip untuk menjana DOM menggunakan jQuery Untuk kelajuan, saya menggunakan beberapa sintaks ES6. Tapi fungsi belum selesai

https://jsfiddle.net/jrhju549/1/

Kemudian apabila saya berfikir tentang melonjakkan bahagian perkara ini, saya mendapati masalah (tentang data):

Dari sudut data, data pilihan untuk pembayaran bulanan dan suku tahun adalah sama tidak kira pada tahun berapa bulan ialah 12 bulan dan suku tahun ialah 4 suku tahun Kemudian data ini sebenarnya tetap dan boleh ditulis terus dalam HTML. Dengan cara ini, apabila menjana baris baharu, anda hanya perlu mengklonkannya dahulu dan kemudian mengendalikan butiran, yang lebih mudah.

Namun, satu lagi kemungkinan tidak boleh diketepikan, iaitu pilihan anda berbeza setiap tahun. Sebagai contoh, 2015 ialah 12 bulan, 2016 ialah 8 bulan... (Sudah tentu, kemungkinan keadaan ini sangat rendah), dalam kes ini, pilih boleh dijana secara dinamik berdasarkan data ini. Kemudian sebelum menjana pilih secara dinamik, anda perlu menggunakan fungsi findXxxx untuk mencari data yang perlu digunakan oleh senarai pilihan yang sepadan - proses ini sudah tentu akan menjadi lebih rumit.

Melihat perkembangan semasa, berikut adalah beberapa perkara utama

Pemprosesan modular

Jangan berfikir untuk melakukan segala-galanya dalam satu fungsi, bahagikannya Sebagai contoh, saya pada mulanya membahagi createRow dan createSelect dalam kod. Antaranya, createSelect sangat boleh digunakan semula

// 创建 select，items 是数据 map 是名称映射表
// 如果名称本来就是按 value 和 text 来命名，就不需要映射表
function createSelect(items, map = {}) {
    const value = map.value || "name";
    const text = map.text || "text";
    const $options = items
        .map(t => $("

Pertama sekali, id hanya boleh muncul sekali dalam halaman dan unik Hanya kelas boleh muncul beberapa kali!

Kenyataan

Realisasi keperluan

Pemprosesan modular

Susun data dahulu