Question

好吧，我正在努力在帐户主页上创建一个小程序，以显示用户已注册到该网站的每个“小孩”。我的想法很简单：

孩子1 /孩子2 /孩子3

当他进入此页面时，作为按钮（带有样式等）。当他点击其中一个按钮/名称时，我会使用javascript来显示孩子的信息的描述等。当我点击其他名称时，当前内容会关闭并显示新的适当内容。

内容是动态创建的，因此包含信息的div的id以孩子的数量命名。示例：content_Info_Kid1，content_Info_Kid2，...无论有多少孩子，如果需要，他们将被命名为content_Info_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种替代品。有人能指出我正确的方向来创建一个动态的方式来根据孩子的数量显示我的内容吗？

Answer 1

编辑（有关一次仅加载一个孩子数据的更新，请参阅底部）

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

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

示例：http://zequinha-bsb.int-domains.com/kidsinfo.html

现在，就动态显示数据而言，它将与您的资源有关：数据库？如果是这样，您可以读取数据并将其传递出去：

$.get('url-of-the-database-reading-script',function (data) {
    // assumed all data comes back formatted:
    $('#KIDS_INFO').html(data);
});

我可以/可以帮助你更多，更多细节会有所帮助。你在使用经典的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);
        })
    })
});

请注意，我在网址的末尾添加了问号;然后是查询字符串kidID =

Answer 2

为每个“Kid”按钮指定相同的类，并将其用于单击处理程序。从那里，您可以通过

将“content_info_kid”与“kid”按钮相关联

1）使用元素的索引。 kid2的按钮应该是相对于其父级的索引1，而kid2的content_info也应该是相对于其父级的索引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");
  }
});

创建动态Javascript AJAX

2 个答案: