简体   繁体   English

单击另一个时更改div的style.display的函数

[英]Function to change style.display of a div when another is clicked

I'm new to javascript and, starting from some code found on this site, I'm trying to change the visibility of a div using a function. 我是javascript新手,从此站点上的一些代码开始,我正在尝试使用函数来更改div的可见性。

The function is 该功能是

var MyClass = document.getElementsByClassName("DivMainSH");
var myFunction = function() {
    var SenderId = this.id;
    var IdNums = SenderId.split("_");
    var SubDivId = 'DivSubSH_' + IdNums[1];
    var SubDiv = document.getElementById(SubDivId);
    if (SubDiv.style.display = 'none'){
        alert("I'm here"); // This works
        SubDiv.style.display = 'blok'; // this doesn't work
        document.getElementById(SubDivId).style.display = 'blok'; // this doesn't work
    }else{
        document.getElementById(SubDivId).style.display = 'none';
    }
};

for (var i = 0; i < MyClass.length; i++) {
    MyClass[i].addEventListener('click', myFunction, false);
}

The code works and I see the alert but the hidden div remains hidden. 该代码有效,我看到了警报,但隐藏的div仍处于隐藏状态。
I've tried many different approaches but no one worked. 我尝试了许多不同的方法,但是没有人起作用。
I'm sure it's some stupid beginner mistake but I'm stuck with this since three days. 我敢肯定这是一个愚蠢的初学者错误,但自三天以来,我一直坚持下去
EDIT 编辑
The "else" part still not working after the typo correction 错字校正后,“其他”部分仍然无法正常工作

The php code I'm using to write the html is the following: 我用来编写html的php代码如下:

$Des_N_Vals=array("FirstName"=>"FirstDescr", 
          "SecondName"=>"SecondDescr",
          "ThirdName"=>"ThirdDescr");
DivShowHide_Insert('Select options', $Des_N_Vals);
Function DivShowHide_Insert($Name, $Arr_NameVal_Descr){
    $Name=str_replace(' ', '_', $Name);
    $Num=0;
    foreach($Arr_NameVal_Descr as $Val => $Descr) {
        echo '<div class="DivMainSH" id="DivMainSH_'.$Num.'">
                  <h3>
                    <input type="checkbox" name="'.$Name.'['.$Num.']" ';
        if (isset($_POST[$Name][$Num]) && $_POST[$Name][$Num]==$Val) echo ' checked="checked" ';
                        echo 'value="'.$Val.'">'.$Val.'</input>
                  </h3>
                <div class="DivSubSH" id="DivSubSH_'.$Num.'" style="display:none;">
                    '.$Descr.'
                </div>
            </div>';
        $Num++;
    }
    echo '</div>';
}

You seem to have misspelt 'block'. 您似乎拼错了“障碍”。

SubDiv.style.display = 'blok';
document.getElementById(SubDivId).style.display = 'blok';

Change this to: 更改为:

SubDiv.style.display = 'block';
document.getElementById(SubDivId).style.display = 'block';

And also, you are actually assigning a value to SubDiv.style.display in your following if statement: 而且,您实际上是在以下if语句中为SubDiv.style.display分配一个值:

if (SubDiv.style.display = 'none') {

This is causing the condition to always be true since the assignment never fails and so the display style of the div is always none , hence your div initially being hidden but never coming back. 这将导致条件始终为true,因为分配永远不会失败,因此div的显示样式始终为none ,因此您的div最初是隐藏的,但再也不会返回。

if (SubDiv.style.display == 'none') {

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM