JQuery变量值递增及课程重复添加问题求助

嘿，我看你遇到了两个头疼的问题：myOption没法持续递增，还有点击按钮会重复添加课程。这俩问题其实都是变量作用域和事件重复绑定搞的鬼，咱们一步步来搞定它：

问题根源分析 #

1. myOption无法递增：你把myOption定义在#add-course的点击事件函数里，每次点击按钮都会重新初始化myOption = 1，自然没法保留之前的数值。而且你在循环里还做了两次++myOption，这会导致数值跳变（比如第一次循环直接从1变到3），完全不符合预期。

2. 课程重复添加：你把#add-course的点击事件绑定写在了AJAX的success回调里，每次下拉框#coursenumber变化并触发AJAX成功后，都会给按钮多绑定一次点击事件。结果就是点击一次按钮，会执行N次绑定的函数（N是你之前触发AJAX的次数），自然就重复添加课程了。

修复后的完整代码 #

$(document).ready(function(){
    // 把myOption提升到ready函数作用域，保留递增状态
    let myOption = 0;

    // 把点击事件绑定移到外面，避免重复绑定
    $(document).on('click','#add-course', function (){
        $("#coursenumberTab").hide();
        $("#subjectTab").hide();
        $("#mycreditsTab").hide();
        $("#strm").empty();
        $("#session_code").empty();
        $("#subject").empty();
        $("#coursenumber").empty();
        $("#mycredits").empty();

        // 使用全局存储的选中课程数据
        if (window.selectedCourse && window.selectedCourse.length > 0) {
            window.selectedCourse.forEach(course => {
                // 先检查是否已经添加过该课程，避免重复
                const isExist = $('#table-2 tbody tr').filter(function() {
                    return $(this).find('td:eq(1)').text() === course.strm &&
                           $(this).find('td:eq(2)').text() === course.subject &&
                           $(this).find('td:eq(3)').text() === course.coursenumber;
                }).length > 0;

                if (!isExist) {
                    myOption++;
                    $('#table-2 > tbody:last-child')
                        .append('<tr id="optionid' + myOption + '">' +
                            '<td>'+ myOption + '</td> ' +
                            '<td>' + course.strm + '</td> ' +
                            '<td>' + course.subject + '</td> ' +
                            '<td>' + course.coursenumber + '</td> ' +
                            '<td>' + course.credits + '</td> ' +
                            '<td><a href="#" class="delete-course">Delete</a></td> ' +
                            '</tr>' );
                }
            });
        }
    });

    $('#coursenumber').change(function() {
        var credit = $(this).val().split('|');
        var data = {};
        data.action = 'getcredits';
        data.strm = credit[0];
        data.sessioncode = credit[1];
        data.subject = credit[2];
        data.coursenumber = credit[3];

        $("#strm").attr('value', data.strm);
        $("#session_code").attr('value', data.sessioncode);
        $("#subjectss").attr('value', data.subject);
        $("#course_numbers").attr('value', data.coursenumber);

        $.ajax({
            dataType: 'json',
            url: '../excesscreditautomation/ajaxxx.do',
            method: 'POST',
            data: $.param(data),
            success: function (response){
                console.log(response);
                displayCredits(response);
                // 把选中的课程数据存到全局变量，供点击按钮时使用
                window.selectedCourse = response.course;
            },
            error: function(){
                alert('failure');
            }
        });
    });//end #credit

    // 可选：添加删除行的功能
    $(document).on('click', '.delete-course', function(e){
        e.preventDefault();
        $(this).closest('tr').remove();
        // 如果需要重新排序ID和序号，可以在这里处理
    });
});

关键修复点说明 #

1. 变量作用域调整：把myOption定义在$(document).ready()的作用域内，这样每次点击按钮时都能保留之前的递增数值，不会被重置。
2. 避免重复绑定事件：将#add-course的点击事件绑定移到AJAX回调外部，确保只会绑定一次，解决点击一次触发多次的问题。
3. 修正自增逻辑：在循环里只做一次myOption++，保证ID和序号的连续递增，不会出现跳变。
4. 重复课程检查：添加了课程存在性判断，根据课程的strm、subject、coursenumber组合来判断是否已经添加，彻底避免重复添加。
5. 数据传递优化：把AJAX返回的课程数据存到全局变量window.selectedCourse，这样点击按钮时就能直接使用，不用依赖AJAX回调的闭包变量。

这样修改后，你的按钮点击应该就能正常递增ID，也不会重复添加课程了！

内容的提问来源于stack exchange，提问作者Maduro