创建动态Javascript-AJAX_Javascript_Jquery_Html_Ajax

创建动态Javascript-AJAX

javascript jquery html ajax

创建动态Javascript-AJAX,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,好的，我目前正在一个帐户主页上创建一个小程序，显示用户注册到该站点的每个“孩子”。我的想法很简单：孩子1/孩子2/孩子3 当他进入这一页时，他会按按钮（样式等）。当他单击其中一个按钮/名称时，我会使用javascript显示孩子信息的描述等。当我单击另一个名称时，当前内容将关闭并显示新的适当内容内容是动态创建的，因此包含该信息的div的id以孩子的数量命名。例如：内容信息基德1，内容信息基德2。。。不管有多少孩子，如果需要，他们将被命名为content\u Info\u Kid32 现在，一

好的，我目前正在一个帐户主页上创建一个小程序，显示用户注册到该站点的每个“孩子”。我的想法很简单：

孩子1/孩子2/孩子3

当他进入这一页时，他会按按钮（样式等）。当他单击其中一个按钮/名称时，我会使用javascript显示孩子信息的描述等。当我单击另一个名称时，当前内容将关闭并显示新的适当内容

内容是动态创建的，因此包含该信息的div的id以孩子的数量命名。例如：内容信息基德1，内容信息基德2。。。不管有多少孩子，如果需要，他们将被命名为content\u Info\u Kid32

现在，一般来说，我对AJAX和javascript不太熟悉。事实上，我根本不是

我的第一个想法是在一个单独的javascript文件中完成这项工作

$(document).ready(function() {
$("#content_info_kid1").hide();
$("#content_info_kid2").hide();
$("#content_info_kid3").hide();

$("#KID_1").click(function () {
    if ($("#content_info_kid1").is(":hidden")){
        $("#content_info_kid2").hide();
        $("#content_info_kid3").hide();
        $("#content_info_kid1").show("slow");
        $(this).css("font-weight","bold");
        $("#KID_2").css("font-weight","normal");
        $("#KID_3").css("font-weight","normal");
    }
});
$("#KID_2").click(function () {
    if ($("#content_info_kid2").is(":hidden")){
        $("#content_info_kid1").hide();
        $("#content_info_kid3").hide();
        $("#content_info_kid2").show("slow");
        $(this).css("font-weight","bold");
        $("#KID_1").css("font-weight","normal");
        $("#KID_3").css("font-weight","normal");
    }
});
$("#KID_3").click(function () {
    if ($("#content_info_kid3").is(":hidden")){
        $("#content_info_kid2").hide();
        $("#content_info_kid1").hide();
        $("#content_info_kid3").show("slow");
        $(this).css("font-weight","bold");
        $("#KID_1").css("font-weight","normal");
        $("#KID_2").css("font-weight","normal");
    }
});
});

显然，这不是动态的。当然，我不想创建32个备选方案。有人能给我指出一个正确的方向来创建一个动态的方式来根据孩子的数量显示我的内容吗？

编辑（请参见底部，了解一次只加载一个孩子数据的更新）

关于如何实现这一目标的示例：

<style type='text/css' media='screen'>
    button { margin-left:20px; display:inline; }
</style>

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>

    function loadKidData(kidID) {

        switch (kidID) {
            case 1 : $('#kName').text(' John Doe');
                     $('#kNickname').text(' Speedy');
                     $('#kHobbies').text(' Booling');
                     break;
            case 2 : $('#kName').text(' Mathews Doe');
                     $('#kNickname').text(' Slowy');
                     $('#kHobbies').text(' Basketball, baseball');
                     break;
            case 3 : $('#kName').text(' Jackson Doe');
                     $('#kNickname').text(' J-DOE');
                     $('#kHobbies').text(' Archery');
                     break;
            case n : $('#kName').text(' Enne Doe');
                     $('#kNickname').text(' The-Nanny');
                     $('#kHobbies').text(' Anything goes');
                     break;
            default : $('#kName').text('');
                     $('#kNickname').text('');
                     $('#kHobbies').text('');
        }

    }

    jQuery( function () {
        $('.nav').click( function () {
            loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10).
        })
    });

</script>

</head>

<body>
    <button class='nav' >KID 1</button><button class='nav' >KID 2</button><button class='nav' >KID 3</button>
    <div id='KID_INFO' style='margin:20px auto; overflow:auto; ' >
     <p>Name:<span id='kName'></span></p>
     <p>Nickname:<span id='kNickname'></span> </p>
     <p>Hobbies:<span id='kHobbies'></span> </p>
    </div>
</body>

我可以/可以进一步帮助你，更多细节会有所帮助。您正在使用经典asp（.asp）；php；等等

编辑：

与此相反：

jQuery( function () {
    $('.nav').click( function () {
    loadKidData($(this).html().replace('KID ','')*1.0); // *1.0 same as parseInt(...,10)
    })
});

这样做：

jQuery( function () {
    $('.nav').click( function () {
        $.get('your-data-fetching-url?kidID='+$(this).html().replace('KID ','')*1.0, function (data) {
            //assumed the data comes back formatted:
            $('#KIDS_DATA').html(data);
        })
    })
});

请注意，我在url的末尾打了一个问号；后跟查询字符串kidID=

为每个“Kid”按钮指定相同的类，并将其用于单击处理程序。从那里，您可以通过以下方式将“内容信息孩子”与“孩子”按钮关联：

1）使用元素的索引。kid2的按钮应该是相对于其父级的索引1，kid2的内容信息也应该是相对于其父级的索引1

或

2）从按钮的ID中提取数字

下面记录了这两种方法

$('.kid_button').click(function(){

  // get number from index (this starts at '0')
  // if your kid #'s start at 1, you should add 1 to this
  var id = $(this).index();

  // OR...get number from id where id format is kid_{#}
  var id = $(this).attr('id').split('_').pop();

  // now we have the number to append to everything else
  // we should also associate all "content_info" with a class
  // which we will call "kid_content"
  if($("#content_info_kid"+id).is(":hidden")){

    // hide all of the 'kid_contents'
    $(".kid_content").hide();

    // show the one we want
    $("#content_info_kid"+id).show("slow");

    // normalize all buttons
    $(".kid_button").css("font-weight","normal");

    // bold this one
    $(this).css("font-weight","bold");
  }
});

PHP与这段代码有什么关系？为什么不只创建一个内容区域，检索已识别的孩子的信息并将其放入div中？我很喜欢这种方法，但我不太理解它。孩子的数量可以从0到N，因此我不太明白开关是如何根据孩子的数量来格式化的。这只是一个如何显示数据的示例。举个例子。现在，你是如何得到这些数据的？数据库在页面中手动编码？你让我们知道的越多，我们能帮助你的就越多！我在MVC模式中使用PHP和代码点火器。现在，当页面加载时，我使用一个控制器来调用一个模型，该模型检索我需要的所有数据。然后，我只需在加载视图时将结果数组发送到视图。在视图中，我的意图是用生成的html创建小程序，在其中我使用结果数组“填充”漏洞。从我的模型中，我可以知道我有多少孩子。因此，我生成了n次HTML来创建将要显示的内容，这是一个巨大的错误：一次加载所有数据。重命名该页面并将其副本更改为仅加载传递的孩子ID号。最终版本将使用我答案的底部；不是开关箱，是这样的错误吗？每次我发出请求时，都必须建立到数据库的连接。一个大的请求比许多小的请求慢吗？此外，我知道这是一个例子，但这段代码如何处理不同数量的孩子？谢谢你们的耐心和时间，因为我只是一个学生。啊，你们可以用类作为事件处理程序吗？也许这就是关键！我现在就试试这个。

$('.kid_button').click(function(){

  // get number from index (this starts at '0')
  // if your kid #'s start at 1, you should add 1 to this
  var id = $(this).index();

  // OR...get number from id where id format is kid_{#}
  var id = $(this).attr('id').split('_').pop();

  // now we have the number to append to everything else
  // we should also associate all "content_info" with a class
  // which we will call "kid_content"
  if($("#content_info_kid"+id).is(":hidden")){

    // hide all of the 'kid_contents'
    $(".kid_content").hide();

    // show the one we want
    $("#content_info_kid"+id).show("slow");

    // normalize all buttons
    $(".kid_button").css("font-weight","normal");

    // bold this one
    $(this).css("font-weight","bold");
  }
});