0

我有一个 JavaScript 函数，它在调用时显示或隐藏弹出窗口，具体取决于窗口的可见性。此功能的先前版本运行良好。也就是说，关闭按钮导致窗口按原样消失。但是，由于在函数中添加了一些代码，关闭按钮不再起作用。下面是该函数的先前版本和当前版本、它操作的“覆盖”div 以及该 div 的 CSS。任何帮助将不胜感激。我无法弄清楚我的哪些更改导致了问题，也不知道如何解决它。

以前的（工作）功能：

<script>
function overlay(descrip, name) {
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br><input type='button' onclick='overlay()' value='Close'></input></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

当前（不工作）功能：

<script>
function overlay(descrip, name, req) {
    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }
    else
        var reqHtml = '';
    var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
    var el = document.getElementById("overlay");
    el.innerHTML = descripBox;
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

覆盖 div：

<div id="overlay">
     <div>
          </br>
          <input type="button" onclick="overlay()" value="Close"></input>
     </div>
</div>

CSS：

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 500px;        
     width:100%;
     height:100%;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #ebebeb;
     border:2px solid #c7c7c7;
     padding:15px;   
}
4

1 回答 1

0

Firstly, your code seems very strange.

    if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
    }

That part will be called because you are calling your function with no parameters :

 onclick="overlay()"

That makes req being undefined. But in Javascript, undefined equals to empty string (your '') and equals to 0 or false. Unless you use a "!==" which means strictly not equal, meaning that you need an empty string.

Then, this :

   else
        var reqHtml = '';

is bad. I'm not sure if you forgot the brackets or what, but always put the brackets around a if/else, unless you want to put it all on a line. This is to avoid errors if you want to add an instruction between the two lines. Also, you var here makes the reqHTML variable in the "else" scope, and so not accessible out of it.

That means you should declare it at the beginning of the function, making your code look like this :

var reqHtml = '';
if(req != ''){
        var obj = new Array();
        obj = req.split("|");
        var reqHtml = "Requirements:</br><ul>";
        for(var i = 0; i < obj.length; i++)
        {
            reqHtml += "<li>"+obj[i]+"</li>";
        }
        reqHtml+= "</ul></br>";
}
var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
        reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
var el = document.getElementById("overlay");

Then, I think detecting the css to know what to do is a bad way of thinking because it could be undefined for exemple. You would be better creating a variable "boxVisibility" to describe it (or even a class box, so you can manage more stuff intelligently).

Finally, all your function parameters are undefined anyway. That means you should keep them global or read them somewhere at the beginning of your function. Here is an exemple that should work :

var descrip = "Test desc";
var name = "Test name";
var req = "test req";
var boxVisibility = true;

function updateBox() {
    var reqHtml = '';
    if(req != ''){
            var obj = new Array();
            obj = req.split("|");
            var reqHtml = "Requirements:</br><ul>";
            for(var i = 0; i < obj.length; i++)
            {
                reqHtml += "<li>"+obj[i]+"</li>";
            }
            reqHtml+= "</ul></br>";
        }
        var descripBox = "<div><h3>"+name+"</h3><p>"+ descrip +"</p></br>"+
            reqHtml +"<center><input type='button' onclick='overlay()' value='Close'></input></center></div>";
        var el = document.getElementById("overlay");
        el.style.visibility = (boxVisibility) ? "hidden" : "visible";
}
function overlay() {
    boxVisibility = !boxVisibility; // Invert the box visibility variable
    updateBox(); // Update box display
}

Then you should change desc, name and req depending on what you want to do in your application.

于 2013-05-11T22:19:02.007 回答