javascript 当数组中的最后一个任务被删除时,如何隐藏div?

dw1jzc5e  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(118)

我在编辑页面上有一个部分,根据用户是否有要编辑的任务,该部分会填充一条消息或一个选择框:

<div class="containerwrapper">
        <h3 id="crvenah3">Izmena zadatka</h3>
        <div class="containerwrappersub" id="containerwrappersub">
        <form method="post" action="" enctype="multipart/form-data" class="container_izmena" id="formaizmena">
            <div id = "levo">
            </div>

            <div id = "desno">
            
            <div id="skriveno" name="skriveno" class="skriveno">
            </div>
            </div>
            
            <input type="text" value="" id="provera" name="provera" hidden="hidden">
            <input type="text" value="" id="obrisi" name="obrisi" hidden="hidden">
        </form>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script> 

<script>  
    function popuniOpcije() {
        let korisnik = "<?php echo $korisnik; ?>";
        $.ajax({
            url: '../funkcije/popuniOpcije.php',
            data: {
                korisnik: korisnik
            },
            success: function (data) {
                $("#levo").html(data);
            }
        });
    }
    popuniOpcije();

下面是popuniOpcije.php文件:

<div id="popuniovde">
</div>

<div class="prikaziizmeni" id="prikaziizmeni">      
    <h4 id="prikaziizmenitekst">The task has been updated<h4>   
</div> 

<script>  
    function popuniZadatke() {
        let korisnik = "<?php echo $korisnik; ?>";
        $.ajax({
            url: '../funkcije/popuniZadatke.php',
            data: {
                korisnik: korisnik
            },
            success: function (data) {
                $("#popuniovde").html(data);
                izaberi();
            }
        });
    }
    popuniZadatke();

下面是popuniZadatke.php文件:

$zadaci = Zadatak::vratiZadatkeZaOpcije($korisnik, $konekcija);
?>

<?php if ($zadaci == null || empty($zadaci)) { ?>
<h4>No tasks to be edited</h4>
<?php } else { ?>

<h4>Zadatak</h4>    
<select id="zadatak" name="zadatak" onchange="prikazi(this.value); popuniDetalje(); sakrij();"required>

<option value="" disabled selected hidden><?= "Zadaci" ?> </option>
<?php

foreach ($zadaci as $zad) {
    ?>
    <option id="zadatakid" value="<?= $zad->zadatakID ?>"><?= $zad->naziv ?> </option>
    <?php
} }
?>
</select>

每当我从页面中删除一个任务时,就会显示相应的消息,并调用相应的函数来刷新选择框或显示没有要编辑的任务的消息:

<div id="buttonwrapperizmena">
            <div class="buttoncontainerizmena">
                <button type="submit" class="buttonizmena" name="button" onclick="izmeniZadatak();"><span class="puntekst">Izmeni zadatak</span><span class="krataktekst">Izmeni</span></button>
            </div>
            <div class="buttoncontainerizmena">
                <button type="submit" class="button2izmena" name="button2" onclick="obrisiSliku(); obrisiZadatak();"><span class="puntekst">Obriši zadatak</span><span class="krataktekst">Obriši</span></button>
            </div>
        </div>

function obrisiZadatak() {
        let brojac = $(".zadatakid").length - 1;
        console.log(brojac);

        $("#formaizmena").ajaxForm({
            "beforeSubmit": function() {
            $("#prikaziizmeni").css("display", "flex");
            if (brojac == 0) {
                $("#prikaziizmeni").hide();
            } else {
                $("#prikaziizmenitekst").text("The task has been deleted");
                $("#prikaziizmeni").show();
            }
            $("#skriveno").css("display", "none");
            },
            "success": function() {
            popuniZadatke();
            }
        })
    }

如何在删除最后一个任务时隐藏prikaziizmeni div,以便只显示正确的消息,而不显示正在删除的任务的消息。我已经在代码中用英语标记了消息,因为函数的名称不是,这样更容易发现
当我console.log(brojac)作为brojac = $(".zadatakid").length;时,如果按下按钮后还有1个任务,我得到2,即删除一个任务,所以我添加了brojac = $(".zadatakid").length;
这段代码有什么问题?

o0lyfsai

o0lyfsai1#

这是因为$(“#prikaziizmeni”).hide()只隐藏元素而不从DOM中删除。必须使用.remove()方法来完全移除元素。在此之后,列表的长度将被更改。如果你有一些过渡,你必须使用settimeout函数或类似的东西:$('#prikaziizmeni').hide( 2000, function() { $( this ).remove(); });

相关问题