只需点击一下即可隐藏Div

时间:2017-06-17 18:59:24

标签: jquery html

我有这个警告框,显示在表单中没有名称或没有类别或没有描述,我已经使用此警报框但在其他页面中使用php,但是,在此页面中我使用jquery来打印出来我只能一键关闭它,实际上需要两次点击才能关闭它。

jquery的

$("#UploadCover").click(function(){
    if(!$("#CoverName").val()){
        $(".navbar-container").append('<div class="alert danger">'+
            '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
            '<strong>Error!</strong> Must have a name!'+
            '</div>');
    }else{
        var sel1 =  $("#addArtCat1").find("option:selected").val();
        var sel2 =  $("#addArtCat2").find("option:selected").val();
        var sel3 =  $("#addArtCat3").find("option:selected").val();
        var sel4 =  $("#addArtCat4").find("option:selected").val();
        var sel5 =  $("#addArtCat5").find("option:selected").val();
        var count = 0;
        var selArray = [sel1, sel2, sel3, sel4, sel5];
        for(var i=1 ; i <= 5 ; i++){
            if(selArray[i] == "---"){
                count++
            }
        }

        if(count >= 4){
            $(".navbar-container").append('<div class="alert danger">'+
                '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
                '<strong>Error!</strong> Must at least chose a category'+
                '</div>');
        }else{
            if(!$("#CoverDescription").val()){
                $(".navbar-container").append('<div class="alert danger">'+
                    '<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span>' +
                    '<strong>Error!</strong> Must have a description'+
                    '</div>');  
            }else{
                alert("fsdfds");
            }
        }
    }
}); 

表格

div id="popup-add-cover" class="popup-black-cover">
        <div class="popup-content-wrapper addCover">
            <div class="popup-content-container">
                <div class="popup-content">
                    <form>
                        Cover image:<br>
                        <label for="coverimage-input">
                            <img src="Images/user.png"/ style="border: 1px solid black">
                        </label>
                        <input id="coverimage-input" type="file" required ><br>

                        name:<br>
                        <input type="text" name="CoverName" id="CoverName" size="40" required ><span style="color: red;">*</span><br>

                        genre:<br>
                        <select class = "artcategoria" name="addArtCat" id="addArtCat1">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat2">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat3">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat4">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select>

                        <select class = "artcategoria" name="addArtCat" id="addArtCat5">
                            <option value="---">---</option>
                            <option value="acao">Action</option>
                            <option value="aventura">Adventure</option>
                            <option value="comedia">Comedy</option>
                            <option value="crime">Crime</option>
                            <option value="drama">Drama</option>
                            <option value="fantasia">Fantasy</option>
                            <option value="gore">Gore</option>
                            <option value="historico">Historical</option>
                            <option value="horror">Horror</option>
                            <option value="magia">Magic</option>
                            <option value="artesmarciais">Martial Arts</option>
                            <option value="misterio">Mistery</option>
                            <option value="parodia">Parody</option>
                            <option value="policia">Police</option>
                            <option value="psicologico">Psychological</option>
                            <option value="romance">Romance</option>
                        </select><span style="color: red;">*</span><br>

                        type:<br>
                        <select class = "artcategoria" name="addarttipo" required>
                            <option value="manga">Manga</option>
                            <option value="mawa">Manhwa</option>
                            <option value="comic">Comic</option>
                            <option value="gagcartoon">Gag Cartoon</option>
                            <option value="other">other</option>
                        </select><span style="color: red;">*</span><br>
                        <textarea cols="50" rows="10" name="CoverDescription" id="CoverDescription"></textarea><span style="color: red;">*</span><br>
                        <input type="submit" id="UploadCover" name="UploadCover" class="buttonpopup" value="Ok">
                        <input type="button" id="NotUploadCover" name="NotUploadCover"  class="buttonpopup" value="Cancel">                 
                    </form> 
                </div>          
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

为什么要在(.nvabar)类中追加div和span?您可以轻松地使用锚标记来显示和隐藏弹出窗口