Question

我正在开发一个小项目，它需要几个按钮，当你点击它们时，它会展开它们下面的菜单，向用户显示一些他们可以选择的选项，但是 - 我怎样才能动态控制事件的顺序？

例如：我需要选择一种颜色才能选择尺寸，等等还有更多选项。

编辑：

以此为例：http://www.notebookbuilder.co.uk

我已经开发了这个（很久以前），看看它的功能。

我希望能够轻松维护这一点，因为目前添加和编辑功能绝对是一场噩梦。

正如您所看到的，在选择笔记本尺寸之前无法进入“下一级别”，当您选择尺寸时，会出现材质选项 - 但您无法点击颜色。

Answer 1

如果我理解正确，你有5个“动作”，同时显示在同一页面上，你想要用户执行动作1（例如，选择一种颜色）才能执行动作2（例如，选择一个大小）。

创建一个大小为5的数组，在每个元素中放置“false”，当action 1完成时，将true放在数组的元素1中，当用户单击action 2时，在允许之前检查数组元素1是否为true用户与之互动。

如果您希望它更具有可持续性和通用性，请使用对象而不是数组，并为每个动作使用标签（例如“颜色”，“大小”等等）。如果还允许您进行更复杂的检查（例如，如果用户可以按顺序选择尺寸和颜色，但必须在选择付款方式之前选择两者...找不到更好的示例：D）。这样，您还可以向用户提供反馈“您必须先选择颜色”。

假设您保留哪些操作的对象称为“操作”：

$('#buttonSize').click(function() {
    // Do whatever you need
    // ...
    actions['size'] = true;
});

$('#buttonColor').click(function() {
    // Check here
    if (!actions['size'] === true) {
        alert("Select a size first");
    }
    // Do whatever you need
    // ...
    actions['color'] = true;
});

等等。

Answer 2

取决于，从选择选项时发布的示例看，在该字段上设置了一个类，因此在下一个选项的情况下，您可以检查前一个选项是否具有设置类和解锁（不用说全部选项被锁定）。

如果您使用一组复选框或下拉列表执行此操作，则同样适用，只需检查是否选择了上一个选项，然后解锁以下选项。

控制jQuery单击事件的顺序

2 个答案: