Question

我希望有人可以帮助我，我担心我对javascript很新，如果这个问题有一个非常简单的解决方案，那么道歉。但是，我花了很多时间尝试自己解决这个问题，但没有成功。

代码的目的是确定当月的天数，并动态创建与每天相关的按钮。覆盖此“日历”的是带有关闭按钮的div，其中包含问题详细信息，关闭按钮会关闭此div以显示下方的“日历”。

我有很多问题;首先，按钮看起来不像按钮 - 光标不会改变为鼠标悬停的指针，并且无法识别悬停，活动等的伪类。其次，虽然按钮似乎在chrome元素检查器中附加了“click”侦听器，但它们不执行'showQuestion'功能。

代码如下：

CSS

 .day {
    width: 15%;
    max-width: 120px;
    min-width: 60px;
    height: 15%;
    max-height: 120px;
    min-height: 60px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    margin: 5px;
    color: white;
    background-color:#000088;
    display:block;
    cursor:pointer;
}



  .day:hover, .day:active{
        background:#00ddff;
    }



 .day:focus{
        border 1px solid #000000;
    }



    .day.today{
        background-color: Red;
    }

    .centred{
        display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;      /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;   /* TWEENER - IE 10 */
        display: -webkit-flex;  /* NEW - Chrome */
        display: flex; 
        align-self: center;
        justify-content: ltr;
        flex-wrap: wrap;
    }

    #container {
        position: fixed;
        margin-top: 25%;
        margin-left: 10%;
        overflow: hidden;
        width: 80%;
        height: auto;
        background-color: yellow; 
        z-index: 1000;
    }



    #questionContainer{
        position:fixed;
        margin-top: 5%;
        margin-left: 5%;
        width: 90%;
        height: 90%;
        display:block;
        background-color: green;
        z-index:3000;
    }



     #closeButton{
        background: blue;
        text-decoration: : none;
        padding: 5px 5px 5px 25px;
        border:none;
        color:white;
        cursor:pointer;

    }



 .show {
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity:1;
        filter:alpha(opacity=100); /*IE transparency*/
    }



 #closeButton:hover, #closeButton:active{
        background:#ffffff;
    }

    #closeButton:focus{
        border 1px solid #000000;
    }




 .hide {  
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity: 0; 
        filter:alpha(opacity=0); /*IE transparency*/
    }

HTML

<body>

<div id="container" class="centred">
</div>

<div id = "questionContainer" class="centred">
    <button id = "closeButton" class = "show" onClick="hideQuestion()">Close</button>
</div>

</body>

的Javascript

 var qtnContainer = document.getElementById("questionContainer");

    function hideQuestion(){
        qtnContainer.className = "hide";
    }

     function showQuestion(){
        qtnContainer.className = "show";
    }

    Date.prototype.daysInThisMonth=function() {
        return new Date(this.getFullYear(),this.getMonth()+1,0).getDate();
    };

    var days = new Date().daysInThisMonth();
    var today = new Date().getDate();

    //alert("days in month = "+ days);
    //alert("day of the month = "+ today);

    for (var i = 0; i < days; i++){
        var dayBtn = document.createElement("button");
        dayBtn.innerHTML = "Day "+(i+1);
        document.getElementById("container").appendChild(dayBtn); 
        if(dayBtn !== null){
            dayBtn.id = "day"+(i+1);
            dayBtn.className = "day";
            dayBtn.addEventListener("click",showQuestion, false);
        }

    } 

    alert("day"+today);

    if(dayBtn.id = "day"+today){
    document.querySelector("#day"+today).className += " today";
    }

虽然我感谢您收到的任何帮助，但请不要向我提供任何jQuery解决方案，我想在纯JavaScript中构建功能以增加我对该语言的理解。

提前感谢您的帮助！

Answer 1

所以，你在代码中遇到了一些小问题，但是经过这些问题，它实际上都是有效的。

首先，如果这是您的整个 javascript文件，那么当您的页面尚未完全加载时，您正在尝试运行代码来查找页面上的元素。所以你需要做的只是在主体加载时才开始执行这段代码。操作简单，只需将您的身体标签更改为如下所示：

<body onload="now_do_stuff()">

然后在这个新函数中将当前不的JS包装在函数内部。如下所示：

function now_do_stuff() {

    qtnContainer = document.getElementById("questionContainer");

    for (var i = 0; i < days; i++){
        var dayBtn = document.createElement("button");
        dayBtn.innerHTML = "Day "+(i+1);
        document.getElementById("container").appendChild(dayBtn); 
        if(dayBtn !== null){
            dayBtn.id = "day"+(i+1);
            dayBtn.className = "day";
            dayBtn.addEventListener("click",showQuestion, false);
        }

    } 

    alert("day"+today);

    if(dayBtn.id = "day"+today) {
        document.querySelector("#day"+today).className += " today";
    }
}

然后它会起作用！

请注意，我已将第一行（您声明qtnContainer的位置）移动到此函数中，并删除了'var'。这样做的原因是它将使它成为一个全局变量，然后其他函数（即hideQuestion和showQuestion）可以访问。

Answer 2

您应该委派点击事件。

所以代替：dayBtn.addEventListener("click",showQuestion, false);

应该是：document.getElementById("day"+(i+1)).addEventListener("click",showQuestion, false);

我想是这样的。（不确定，因为我主要使用jQuery）

Answer 3

嗯，事件已正确连接，但您的questionContainer仍然阻止与鼠标的任何交互。使用pointer-events: none来解决此问题。

像这样：

 .hide {  
        -o-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        opacity: 0; 
        filter:alpha(opacity=0); /*IE transparency*/
        pointer-events:none;
    }

看到它起作用： http://jsfiddle.net/t9zvS/1/

可能你会在IE中遇到一些问题。研究这个SO主题：Pass mouse events through absolutely-positioned element

动态创建的Javascript按钮无法正常运行或调用功能

CSS

HTML

的Javascript

3 个答案: