jquery: скрытие содержимого div
Я новичок в программировании и JavaScript. Я хочу создать простую игру с цифрами. Программа похожа на это, когда пользователь нажимает кнопку, цифры будут отображаться через 5 секунд, после чего числа будут скрываться, пока пользователь не нажмет на карты. Правильно ли этот код? Я пробовал много кодов, но он не работал
// {k1,...,k16} are the divs' ids and kart is div classname
$(document).ready(function() {
$("button").click(function() {
$("#k1").html("2");
$("#k2").html("3");
$("#k3").html("1");
$("#k4").html("3");
$("#k5").html("5");
$("#k6").html("6");
$("#k7").html("1");
$("#k8").html("6");
$("#k9").html("4");
$("#k10").html("7");
$("#k11").html("8");
$("#k12").html("8");
$("#k13").html("5");
$("#k14").html("7");
$("#k15").html("2");
$("#k16").html("4");
});
});
function myFunction() {
setTimeout(function() {
$('.kart').empty();
}, 4000);
}
Надеюсь, это поможет вам: в основном вы хотите скрыть содержимое div, чтобы вы могли сделать hide(); , то вы сказали, что вы покажете карту в течение нескольких секунд, затем выполните
setTimeout(function() {
$(".kart").html();
}, 1000);
и используйте .show().
Вы хотели это сделать?
//k1,k2 and... are div ids and kart is divs classname
$(document).ready(function() {
$("button").click(function() {
$("#k1").data("number", "2");
$("#k2").data("number", "3");
$("#k3").data("number", "1");
$("#k4").data("number", "3");
$("#k5").data("number", "5");
$("#k6").data("number", "6");
$("#k7").data("number", "1");
$("#k8").data("number", "6");
$("#k9").data("number", "4");
$("#k10").data("number", "7");
$("#k11").data("number", "8");
$("#k12").data("number", "8");
$("#k13").data("number", "5");
$("#k14").data("number", "7");
$("#k15").data("number", "2");
$("#k16").data("number", "4");
myFunction();
});
});
function myFunction() {
$(".kart").each(function(i, a) {
$(a).html($(a).data("number"));
});
setTimeout(function() {
// if you want to use class name for selector, you must set the class first!
$(".kart").html("");
}, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="k1" class="kart"></div>
<div id="k2" class="kart"></div>
<div id="k3" class="kart"></div>
<div id="k4" class="kart"></div>
<div id="k5" class="kart"></div>
<div id="k6" class="kart"></div>
<div id="k7" class="kart"></div>
<div id="k8" class="kart"></div>
<div id="k9" class="kart"></div>
<div id="k10" class="kart"></div>
<div id="k11" class="kart"></div>
<div id="k12" class="kart"></div>
<div id="k13" class="kart"></div>
<div id="k14" class="kart"></div>
<div id="k15" class="kart"></div>
<div id="k16" class="kart"></div>
<button type="button">click me</button>