Javascript 处理“的模式的名称”；“开关式”；复选框_Javascript_Jquery_Algorithm_Design Patterns_Imagemapster

Javascript 处理“的模式的名称”；“开关式”；复选框

javascript jquery algorithm design-patterns

Javascript 处理“的模式的名称”；“开关式”；复选框,javascript,jquery,algorithm,design-patterns,imagemapster,Javascript,Jquery,Algorithm,Design Patterns,Imagemapster,我正试图处理一个名字我不太清楚的问题（因此在谷歌搜索时有困难）它处理一组类似“开关”的复选框以下是具体内容：我正在使用与该演示类似的复选框设置复选框是从状态名称生成的，单击它们将调用mapster来打开/关闭状态我正在使用另外一组复选框，称为“美国东北部”、“美国东南部”等等点击“东北”必须打开该地区的所有州。再次单击应将其关闭。很简单并发症：区域之间存在重叠状态点击美国东北部，然后关闭其中一个州，然后点击东南部，等等，现在把我简单明了的逻辑弄糊涂了可能的解决方案：

我正试图处理一个名字我不太清楚的问题（因此在谷歌搜索时有困难）

它处理一组类似“开关”的复选框

以下是具体内容：

我正在使用与该演示类似的复选框设置
复选框是从状态名称生成的，单击它们将调用mapster来打开/关闭状态
我正在使用另外一组复选框，称为“美国东北部”、“美国东南部”等等
点击“东北”必须打开该地区的所有州。再次单击应将其关闭。很简单

并发症：

区域之间存在重叠状态
点击美国东北部，然后关闭其中一个州，然后点击东南部，等等，现在把我简单明了的逻辑弄糊涂了

可能的解决方案：

我需要这些三级复选框作为“开关”，跟踪复选框和mapster区域的状态
东北部必须足够聪明，当其中一个手动单击复选框
不要因为状态重叠而混淆NE的数据状态。。。等等

我正在寻找一个设计模式，已经处理过这种问题之前。如果有人知道一个没有名字的解决方案模式，那么这种知识也是最受欢迎的

谢谢你的阅读

我认为您只需要依赖checkboxen的javascript onclick事件

有两种情况：

正在取消选中该复选框（即，它处于启用状态）。它必须根据它查找所有的boxen，如果选中了它们，则调用它们的
```
click
```
方法
正在选中该复选框。它必须查找它所依赖的所有boxen，如果未选中它们，则调用它们的
```
click
```
方法

依赖关系图可以描述为矩阵，列和行索引表示框编号，矩阵单元表示行框是否依赖、是否依赖或与列框没有关系

您可能希望使用单独的数组来保持框名称和索引之间的映射

当然，您必须确保依赖关系图中没有循环，否则您最终会让事件触发器递归地调用自己

更新：

我尝试了自己的解决方案，看看效果如何

Html文档：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 <table>
  <thead>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <tr>
    <th colspan="2">Level 1</th>
    <th colspan="2">Level 2</th>
    <th colspan="2">Level 3</th>
    </tr>
  <tbody>
    <tr>
      <td colspan='4'></td>
      <td rowspan='0'><label for='top' >top</label></td>
      <td rowspan='0'><input type='checkbox' id='top' value=''/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp1' >grp1</label></td>
      <td rowspan='3'><input type='checkbox' id='grp1' value=''/></td>
    </tr>
    <tr>
      <td><label for='id1' >id1</label></td>
      <td><input type='checkbox' id='id1' value='abc'/></td>
    </tr>
    <tr>
      <td><label for='id2' >id2</label></td>
      <td><input type='checkbox' id='id2' value='def'/></td>
    </tr>
    <tr>
      <td><label for='id3' >id3</label></td>
      <td><input type='checkbox' id='id3' value='ghi'/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp2' >grp2</label></td>
      <td rowspan='3'><input type='checkbox' id='grp2' value=''/></td>
    </tr>
    <tr>
      <td><label for='id4' >id4</label></td>
      <td><input type='checkbox' id='id4' value='klm'/></td>
    </tr>
    <tr>
      <td><label for='id5' >id5</label></td>
      <td><input type='checkbox' id='id5' value='nop'/></td>
    </tr>
    <tr>
      <td><label for='id6' >id6</label></td>
      <td><input type='checkbox' id='id6' value='qrs'/></td>
    </tr>
  </tbody>
</table>
<hr>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/multicheck.js" type="text/javascript"></script>
</body>
</html>

数据对象包含所有依赖关系信息：

依赖关系

列出所有“直接依赖”关系，

拥有关系

列出反向关系

虽然它表示依赖关系图，但我直接使用boxen的ID作为索引，并将其拆分为两个

例如：

无论何时选中
```
top
```
s，都会在级联中检查所有其他框（
```
grp1
```
首先检查它拥有的所有ID，然后同样地检查
```
grp2
```
）
每当取消选中
```
id5
```
时，
```
grp1
```
、
```
top
```
和
```
grp2
```
按此级联顺序取消选中

_备注：我不精通jquery，因此可能有更简洁的方法获得相同的结果_

这就是集合论的用武之地

您可以使用三态复选框表示零件选择。看这里

有一个jQuery tristate复选框插件

你把它弄得太复杂了。只需在那里放置一个名为“美国东北部”的复选框，点击该复选框，即可选中该地区下各州的所有mapster复选框。也许您要查找的单词是“切换”。嗨，Ejay，这就是它现在的工作方式。。。NE等人只是“愚蠢的切换者”，他们只是从复选框中删除所有选择数据并将其“打开”。但我真的需要开关功能才能工作@didierc我相信这不仅仅是一种切换……在数学中，这将是集合论，不是吗？我不认为我了解您试图完成的每一个细节，但ImageMapster具有一些内置功能，可以独立于每个区域的状态来管理区域组，例如：哇，感谢您提供的示例代码！我会试试看，然后回来。再次感谢！很高兴你喜欢它。我发现这个问题很有趣。

var data = {
    depends: {
        id1 : ['grp1'],
        id2 : ['grp1'],
        id3 : ['grp1', 'grp2'],
        id4 : ['grp2'],
        id5 : ['grp2', 'grp1'],
        id6 : ['grp2'],
        grp1 : ['top'],
        grp2 : ['top']
    },
    owns : {
        grp1 : ['id1','id2','id3', 'id5'],
        grp2 : ['id4','id5','id6', 'id3'],
        top  : ['grp1','grp2']
    }    
};

function check(elt){
    var target = elt.target;
    if (!target.checked) {
        // unchecking -> uncheck depends
        for (e in data.depends[target.id]) {
            $("input#"+data.depends[target.id][e]).each(
                function(){
                    if (this.checked)
                        this.click();
                });
        }
    }
    else {
        // checking -> check owns
        for (e in data.owns[target.id]) {
            $("input#"+data.owns[target.id][e]).each(
                function (){
                    if (!this.checked)
                        this.click();
                });
        }
    }
    return true;
}

(function(){
     $(document).ready(function(){
         $("input[type='checkbox']").bind('click',check);
     });
})();