Question

我有一个包含三个可点击的div的页面。当用户单击div时，将调用js函数，发送XMLHttpRequest，并在该div下面加载检索到的信息。如果用户再次单击相同的div，则隐藏信息。 HTML代码：

<div><input name="Master" type="Submit" class="My_Class" value="The First Group" onclick="WhatToShow('Group1');"></div>
<div id="Group1"></div>
<div><input name="Master" type="Submit" class="My_Class" value="The Second Group" onclick="WhatToShow('Group2');"></div>
<div id="Group2"></div>
<div><input name="Master" type="Submit" class="My_Class" value="The Third Group" onclick="WhatToShow('Group3');"></div>
<div id="Group3"></div>

JS代码：

<script>
function WhatToShow(My_Group) {
    if (typeof TheStatus === 'undefined' || TheStatus == 0) {
        TheStatus=1;
    }
    else {
        TheStatus=0;    
    }

    if (TheStatus==0) {
        document.getElementById(My_Group).style.display = 'none';
    }
    else {
        document.getElementById(My_Group).style.display = 'inline';
    }
        //XMLHttpRequest here
        //loading in document.getElementById(My_Group)
}
</script>

我的问题：如果用户点击div，则会显示信息。但是为了显示来自另一个div的信息（没有“关闭”第一个），他必须点击两次。这是因为变量TheStaus。有没有办法将某事定义为TheStaus[My_Group]？这样我就会为每个组定义一个“变量”。

Answer 1

是使用对象，使用mb2.groupby(by=mapping,axis=1).sum()初始化，然后您可以编写TheStatus = {};等。

E.g。

TheStatus[MyGroup] = 0;

如果你想要一些额外的通用编程建议，传统的做法是在类，库等变量名的开头保留大写字母（以及常用于常量的ALLCAPS）。我建议不要将任何变量大写。另外我建议使用camelCase或snake_case，而不是两者。

通过这些轻微修改，您的代码将成为

<script>
var TheStatus = {};
function WhatToShow(My_Group) {
    if (typeof TheStatus[My_Group] === 'undefined' || TheStatus[My_Group] == 0) {
        TheStatus[My_Group]=1;
    }
    else {
        TheStatus[My_Group]=0;    
    }

    if (TheStatus[My_Group]==0) {
        document.getElementById(My_Group).style.display = 'none';
    }
    else {
        document.getElementById(My_Group).style.display = 'inline';
    }
        //XMLHttpRequest here
        //loading in document.getElementById(My_Group)
}
</script>

你现在可以看到stackoverflow荧光笔有点驯服了。

Answer 2

js code


<script>
function WhatToShow(My_Group) {
    document.getElementById(Group1).style.display = 'none';
    document.getElementById(Group2).style.display = 'none';
    document.getElementById(Group3).style.display = 'none';
    if (typeof TheStatus === 'undefined' || TheStatus == 0) {
        TheStatus=1;
    }
    else {
        TheStatus=0;    
    }

    if (TheStatus==0) {
        document.getElementById(My_Group).style.display = 'none';
    }
    else {
        document.getElementById(My_Group).style.display = 'inline';
    }
        //XMLHttpRequest here
        //loading in document.getElementById(My_Group)
}
</script>

Answer 3

使用数组或对象来维护每个元素的状态，而不是使用单个标量值来测试多个元素的隐藏/显示属性。

function WhatToShow(My_Group) {

    var shown = {
        "Group1": false,
        "Group2": false,
        "Group3": false
    };
    var currentEltId = this.getAttribute('id');

    if (shown[currentEltId]) {
        this.style.display = 'none';
    } else {
        this.style.display = 'inline';
    }

    shown[currentEltId] = !shown[currentEltId]

    //XMLHttpRequest here
    //loading in document.getElementById(My_Group)
}

Answer 4

function WhatToShow(My_Group) {
        document.getElementById("Group1").style.display = 'none';
        document.getElementById("Group2").style.display = 'none';
        document.getElementById("Group3").style.display = 'none';
    $("#"+My_Group).show();
        
    }

#Group1,#Group2,#Group3{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input name="Master" type="Submit" class="My_Class" value="The First Group" onclick="WhatToShow('Group1');"></div>
<div id="Group1">khhd</div>
<div><input name="Master" type="Submit" class="My_Class" value="The Second Group" onclick="WhatToShow('Group2');"></div>
<div id="Group2">ddd1</div>
<div><input name="Master" type="Submit" class="My_Class" value="The Third Group" onclick="WhatToShow('Group3');"></div>
<div id="Group3">ddd2</div>

Answer 5

TheStatus具有全局范围，无论遇到什么div，您都可以将其设置为在每次击中div时进行切换。因此，为了显示一个div，你点击一个div，将TheStatus切换为1，然后在下次击中div时 - 任何div - TheStatus切换回零，使所有div消失。你必须再次击中div才能显示它。

我认为您正确的想法，即为每个群组创建TheStatus。

也许尝试这样的事情：

<script>
  var TheStatus = [0,0,0];
  function WhatToShow(My_Group) {
    // Toggle the TheStatus element corresponding to My_Group
    switch (My_Group) {
      case 'Group1': TheStatus[0] = (TheStatus[0] == 1) ? 0 : 1; break;
      case 'Group2': TheStatus[1] = (TheStatus[1] == 1) ? 0 : 1; break;
      case 'Group3': TheStatus[2] = (TheStatus[2] == 1) ? 0 : 1; break;
    }
    // Now set the display according to TheStatus of each element
    TheStatus.forEach(function(status,i) {
      var visibility = (status == 1) ? 'inline' : 'none';
      var groupId = 'Group' + (i+1).toString(); // construct group ID
      document.getElementById(groupId).style.display = visibility;
    });
    //XMLHttpRequest here
    //loading in document.getElementById(My_Group)
  }
</script>

我确信上述内容可以进行优化，特别是考虑到您可以拥有任意数量的群组，但我认为您明白了这一点。基本上，每次命中div时，都会导致其各自的元素切换其可见性，然后为整组div重新执行逻辑。

Answer 6

你可以使用Bootstrap手风琴。 http://getbootstrap.com/javascript/#collapse-example-accordion

在javascript中设置数组值

6 个答案: