上一个任务被删除时如何停止显示 div？

Question

我在编辑页面上有一个部分，根据用户是否有要编辑的任务来填充消息或选择框：

<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;

        $("#formaizmena").ajaxForm({ 
            "beforeSubmit": function() {
                $("#prikaziizmeni").css("display", "flex"); 
                $("#prikaziizmenitekst").text("Zadatak je uspešno obrisan"); 
                $("#skriveno").css("display", "none"); 
            },
            "success": function() { 
                popuniZadatke(); 
                if (brojac > 1) {
                    $("#prikaziizmeni").css("display", "none");
                }
            }})
    }

如何在删除最后一个任务时隐藏

prikaziizmeni

div，以便只显示正确的消息而不显示任务的消息被删除。我在代码中用英文标记了消息，因为函数的名称不是，这样更容易发现

Answer 1

你的条件不对。当你删除除最后一个任务之外的任何东西时，你隐藏了 div。 如果您只是想将消息隐藏在成功函数中，那么在提交之前显示消息是没有意义的。提交前做

brojac

测试。

你不应该有多个

<option id="zadatakid"

，因为 ID 应该是唯一的。将其更改为

<option class="zadatakid"

，然后使用

$(".zadatakid").length

获取任务数。

function obrisiZadatak() {
  let brojac = $(".zadatakid").length;

  $("#formaizmena").ajaxForm({
    "beforeSubmit": function() {
      $("#prikaziizmeni").css("display", "flex");
      if (brojac > 1) {
        $("#prikaziizmenitekst").text("Zadatak je uspešno obrisan");
        $("#prikaziizmeni").show();
      } else {
        $("#prikaziizmeni").hide();
      }
      $("#skriveno").css("display", "none");
    },
    "success": function() {
      popuniZadatke();
    }
  })
}