0

我正在为我们大学的一个系创建一个简单的基于 Web 的课程安排程序，目前正在开发 UI。我正在使用 jQuery UI 的手风琴和可排序扩展来创建它。我设置了它，以便您可以添加/删除课程和添加/删除术语，其中术语都是连接的可排序的有序列表。

我遇到的问题是当一个术语已经是 html 页面的一部分时，一切都完美无缺。但是，当您使用 jQuery 添加术语 OL 时，可以添加但不能删除课程。当您尝试删除课程时，您会收到“预期对象”错误。即使您从另一个术语中拖动现有的 li 元素，当您尝试将它们从新术语中删除时，您仍然会收到 Object Expected 错误。

我的想法是 1）我需要刷新新术语或 2）我没有正确初始化新术语。下面是我的javascript。

如果需要，我可以共享 html 代码，但它只是一个带有调用 javascript 函数的按钮的表单。

// Remove selected courses from term
function remCourse(term) {
var termDiv = '#term' + term + 'classes';

    $(termDiv).children().children().children(":checked").each(function() {
      $(this).parent().parent().remove();
    });
}

// Add course to term
function addCourse(term) {
var termDiv = '#term' + term + 'classes';

var course = $(termDiv).children().length + 1;

$(termDiv).append('<li class="ui-state-active"><span class="courseAction"><input name="' + term + 'c' + course + 'box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c' + course + 'cred" name="' + term + 'c' + course + 'cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c' + course + 'meet" name="' + term + 'c' + course + 'meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="20" maxlength="50" /> </span></li>'
);
}

// Remove selected terms
function remTerm() {
  $("#terms").children().children().children(":checked").each(function() {
    $(this).parent().parent().remove();
  });
}

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="removeCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

    // I tried doing a refresh below, but it just gave me an error
    // so I commented it out.
//$(termDiv).sortable('refresh');

}
4

1 回答 1

-1

我发现这是我的一个简单的错字。在 addTerm() javascript 代码中，我让 Remove Selected Courses 按钮调用 removeTerm() 函数而不是 remTerm() 函数。叹息我会停止打错字吗？

更正后的代码是：

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="remCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

}
于 2013-03-14T13:50:56.160 回答