jQuery：隐藏div的内容

Question

I'm new to programming and JavaScript. I want to create a simple memory game with numbers. The program is like this, when the user click on the button, numbers will be shown in 5 seconds and after that, numbers will hide until the user click on cards. Is the code below right? I tried many codes but it didn't work

// {k1,...,k16} are the divs' ids and kart is div's 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);
}

Answer 1

Did you want to do this?

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

Answer 2

I hope this can help you out: basically you want to hide the content of the div so you can do the hide(); function then you said you will show the card for seconds then do a

setTimeout(function() {

    $(".kart").html();

}, 1000);

and use the .show() function.