for循环内的jquery'click'事件答案

【问题标题】：jquery 'click' event inside the for loopfor循环内的jquery'click'事件
【发布时间】：2013-02-24 06:02:02
【问题描述】：

我是 JavaScript 新手。我想在 javascript 中执行分页之类的任务。这是我的代码。

for(var i=1;i<=total_guest;i++)
{   
$("#Personal"+i).find("#Personal_details ").show();
$('#Personal'+i).find('.personal_info').click(function(e){
    alert(i);
        e.preventDefault();
        $("#Personal"+i).find("#Personal_details ").hide();


    }); 
}

解释：

在循环中，我得到了 total_guest 值（示例 5）。开始时，我想获取第一位客人的页面。当我单击下一个按钮（class='personal_info'）时，我应该像明智的那样显示下一位客人的页面，直到第 5 位客人。

谁能给出解决方案？

编辑以包含 HTML：

<div id='Personal1' > 
    <div id='Personal_details'> 
        <div class='personal_info'>button for next step</div> 
    </div> 
</div> 
<div id='Personal2' > 
    <div id='Personal_details'> 
        <div class='personal_info'>button for next step</div> 
    </div> 
</div>

【问题讨论】：

能否请您发布您的 HTML 或描述它？ ID 并不能完全清楚哪些元素是您的“页面”。
下一步按钮

下一步按钮

我手动输入了这个。我保证这些是正确的元素我的资源中有什么
@DurgaGanesh 请使用编辑按钮添加到您的问题；我将您评论中的 HTML 添加到您的原始问题中，这样更容易阅读。
ids 在文档中应该是唯一的，你有多个id为Personal_details的元素！！
谢谢你的建议。我会遵守的。

标签： javascript

【解决方案1】：

为了让你的循环工作，你需要一个闭包来保持点击函数内i的值不变，但这一切似乎都是不必要的，你可以这样做：

$(".Personal_details").show().on('click', function(){
    $(this).hide();
});

请注意，ID 是唯一的，.find(someID) 没有意义，因为该 ID 只能有一个元素。

编辑：基于新的 HTML，这是一个错误！您不能拥有两次（或更多）相同的 ID。

<div id='Personal1' > 
    <div class='Personal_details'> 
        <div class='personal_info'>button for next step</div> 
    </div> 
</div> 
<div id='Personal2' > 
    <div class='Personal_details'> 
        <div class='personal_info'>button for next step</div> 
    </div> 
</div>

【讨论】：

感谢您的建议。根据用户的选择，我的 ID 是 '#Personal1'、'#Personal2'、'#Personal3' 等。我希望循环增加数字。
那你为什么要定位它，选择器正在寻找具有该 ID 的元素？

【解决方案2】：

试试这个，把 id 改成 class 例如id="Personal1" to class="personal" 然后

$('document').ready(function() {

    $('.personal').click(function() {
           $(this).children('.personal-details').show();
    });

    $('.personal_info').click(function() {
           $(this).parent().hide();
           $(this).parent().parent().next().children('.personal-details').show();
    });
});

【讨论】：