如何使用jquery和javascript隐藏页面加载上的某些记录_Javascript_Jquery

如何使用jquery和javascript隐藏页面加载上的某些记录

javascript jquery

如何使用jquery和javascript隐藏页面加载上的某些记录,javascript,jquery,Javascript,Jquery,我有三条json记录，显示成功现在，我希望在页面加载时隐藏所有的名字，以便以后可以使用单个按钮在单击按钮时一个接一个地显示它们我已经添加了这行代码，但没有隐藏任何内容 // hide all firstname on page load $("[id^='firstnameHide_']").hide(); 这是我的全部代码 <!doctype html> <html> <head> <scr

我有三条json记录，显示成功

现在，我希望在页面加载时隐藏所有的名字，以便以后可以使用单个按钮在单击按钮时一个接一个地显示它们

我已经添加了这行代码，但没有隐藏任何内容

 // hide all firstname on page load
            $("[id^='firstnameHide_']").hide();

这是我的全部代码

<!doctype html>
  <html>
   <head>
<script src="jquery.min.js"></script>

  </head>
  <body> 

 <h1>My Record</h1>
<div id="record"></div> 
<div id="record_btn"></div>
<script>
var json = [{
"id": 1,
    "firstName": "John",
        "lastName": "Doe"
}, {
"id": 2,
    "firstName": "Anna",
        "lastName": "Smith"
}, {
"id": 3,
    "firstName": "Peter",
        "lastName": "Jones"
}];

$(document).ready(function(){
 var len = json.length;

 // hide all firstname on page load
            $("[id^='firstnameHide_']").hide();
          

 var tr_str1 = "<div>";
            for(var i=0; i<len; i++){
              var id = json[i].id;
                var firstname = json[i].firstName;
                var lastname = json[i].lastName;
               

                var tr_str = "<form>" +
                  

 "<div><b>Id:</b> " + id + "</div><br />" +
  "<div><b>lastname:</b> " + lastname + "</div><br />" +
 "<div id='firstnameHide_"+ id +"'><b>Firstname:</b> " + firstname + "</div>" +
"<button  class='f_btn'>show Firstname</button>"+


                "</div>";

               $("#record").append(tr_str);
}
 var tr_str2 =   "</div>";

});




$(document).ready(function(){
    //$('#f_btn').click(function(){
$(document).on( 'click', '.f_btn', function(){ 

//show first name based on button click
alert('click working');


})

});


</script>

  </body>
</html>


我的记录
var json=[{
“id”：1，
“名字”：“约翰”，
“姓氏”：“能源部”
}, {
“id”：2，
“名字”：“安娜”，
“姓氏”：“史密斯”
}, {
“id”：3，
“名字”：“彼得”，
“姓氏”：“琼斯”
}];
$（文档）.ready（函数（）{
var len=json.length；
//在页面加载时隐藏所有firstname
$（“[id^='firstnameHide_']”）.hide（）；
var tr_str1=“”；
对于（var i=0；i我改变了很多东西，这不是编码它的完美方式，但它还可以


var json=[{
“id”：1，
“名字”：“约翰”，
“姓氏”：“能源部”
}, {
“id”：2，
“名字”：“安娜”，
“姓氏”：“史密斯”
}, {
“id”：3，
“名字”：“彼得”，
“姓氏”：“琼斯”
}];
$（文档）.ready（函数（）{
json.forEach（{id，firstName，lastName}）=>{
常量li=$（“”）；
追加（`p>Id:${Id}`）；
追加（`p>lastname:${lastname}`）；
常量firstNameHiddable=$（“”）.append（`Firstname:${Firstname}`）；
firstNameHiddable.hide（）；
li.append（firstnameHidded）；
常量按钮=$（'Show firstname'）；
按钮。在（'单击'，（）=>{
firstNameHiddable.show（）；
按钮隐藏（）；
});
li.追加（按钮）；
$（“#记录”）。追加（li）；
});
});
我的记录

我不确定这种方式（动态编写html）是否是最正确的方法，但如果您想这样做，问题是您在它退出之前就隐藏了它，您可以在创建后隐藏它：
<!doctype html>
  <html>
   <head>
        <script src="jquery.min.js"></script>
  </head>
  <body> 

    <h1>My Record</h1>
    <div id="record"></div> 
    <div id="record_btn"></div>
    <script>
        var json = [{
            "id": 1,
            "firstName": "John",
            "lastName": "Doe"
        }, {
            "id": 2,
            "firstName": "Anna",
            "lastName": "Smith"
        }, {
            "id": 3,
            "firstName": "Peter",
            "lastName": "Jones"
        }];
        $(document).ready(function(){
            var len = json.length;
            // hide all firstname on page load
            //$("[id^='firstnameHide_']").hide();
            var tr_str1 = "<div>";
            for(var i=0; i<len; i++){
                var id = json[i].id;
                var firstname = json[i].firstName;
                var lastname = json[i].lastName;
                var tr_str = "<form>" +
                    "<div><b>Id:</b> " + id + "</div><br />" +
                    "<div><b>lastname:</b> " + lastname + "</div><br />" +
                    "<div id='firstnameHide_"+ id +"'><b>Firstname:</b> " + firstname + "</div>" +
                    "<button  class='f_btn'>show Firstname</button>"+
                    "</div>";
                $("#record").append(tr_str);
            }
            var tr_str2 =   "</div>";
            // hide all firstname after they have been added to dom
            $("[id^='firstnameHide_']").hide();
        });
        $(document).ready(function(){
            //$('#f_btn').click(function(){
                $(document).on( 'click', '.f_btn', function(){ 
                //show first name based on button click
                alert('click working');
            })
    
        });
    </script>
  </body>
</html>



我的记录
var json=[{
“id”：1，
“名字”：“约翰”，
“姓氏”：“能源部”
}, {
“id”：2，
“名字”：“安娜”，
“姓氏”：“史密斯”
}, {
“id”：3，
“名字”：“彼得”，
“姓氏”：“琼斯”
}];
$（文档）.ready（函数（）{
var len=json.length；
//在页面加载时隐藏所有firstname
//$（“[id^='firstnameHide_']”）.hide（）；
var tr_str1=“”；
对于（var i=0；i）您试图隐藏尚未存在的元素。