我在编辑页面上有一个部分,根据用户是否有要编辑的任务,该部分会填充一条消息或一个选择框:
<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;
。
这段代码有什么问题?
1条答案
按热度按时间o0lyfsai1#
这是因为$(“#prikaziizmeni”).hide()只隐藏元素而不从DOM中删除。必须使用.remove()方法来完全移除元素。在此之后,列表的长度将被更改。如果你有一些过渡,你必须使用settimeout函数或类似的东西:
$('#prikaziizmeni').hide( 2000, function() { $( this ).remove(); });