标签：jquery 删除 form travel 添加 input div type first

重点：
1.自定义属性解决动态生成元素的删除
2.利用事件委派删除动态生成的元素改变对应checkbox状态
3.注意this的指向问题

    //已选择路线的添加
    //游玩路线
    $('.travel-form>div>div>p input').on('click', function() {
        var choice = $('<a href="javascript:;"></a>');
        choice.attr('myIndex', $(this).index()); //为动态生成的游玩路线添加自定义属性myIndex
        if ($(this).prop("checked")) {
            $('.travel-form>div>div:first-of-type>p').append(choice);
            choice.html($(this).prevAll('span').text() + $(this).val() + '<i>&#xf00d;</i>');
        } else {
            //for循环遍历整个已选择路线里的a标签
            for (var i = 0; i < $('.travel-form>div>div:first-of-type>p>a').length; i++) {
                //判断是否有符合自定义属性的a标签
                if ($('.travel-form>div>div:first-of-type>p>a').eq(i).attr('myIndex') == $(this).index()) {
                    //删除对应a标签
                    $('.travel-form>div>div:first-of-type>p>a').eq(i).remove();
                }
            }
        }
    })

    //以下所有p>a标签结构
    $('.travel-form>div>div:nth-of-type(n+2)>p').on('click', 'a', function() {
        var choiceA = $('<a href="javascript:;"></a>');
        $('.travel-form>div>div:first-of-type>p').append(choiceA);
        choiceA.html($(this).prevAll('span').text() + $(this).text() + '<i>&#xf00d;</i>');
    })

    //已选择路线的删除
    $('.travel-form>div>div:first-of-type>p').on('click', 'i', function() {
        $(this).parent().fadeOut(function() { //回调函数(淡出效果)
            $(this).remove(); //这里的this指的是a标签了
        });
        //for循环遍历input元素
        for (var i = 0; i < $('.travel-form>div>div>p input').length; i++) {
            //判断input的index属性是否与动态生成的a标签自定义属性myIndex相等
            if ($('.travel-form>div>div>p input').eq(i).index() == Number($(this).parent().attr('myIndex'))) {//这里注意需要转换为数字类型
                //符合条件则修改input框的checked值为false
                $('.travel-form>div>div>p input').eq(i).prop('checked', false);
            }
        }
    })

标签：jquery,删除,form,travel,添加,input,div,type,first
来源： https://blog.csdn.net/Y1_1Y1_1y1_1y/article/details/121434972

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。