php, jquery 只有第一个 id 工作正常答案

【问题标题】：php, jquery only first id working normalphp, jquery 只有第一个 id 工作正常
【发布时间】：2013-02-17 23:48:52
【问题描述】：

我在 .php 中有以下代码（代码经过编辑以便于理解）。

while($row = mysql_fetch_array($biznis)){
<div id='listItem'>
    <div id='listPic'>
        <img src='../../social/images/avatar/empty_avatar_full.jpg'></img>
    </div>
    <div id='listCont'>
        <span>abcde<i>(request pending)</i></span>                              
    </div>
    <div id="listInfo">
        <span id='info'>More info</span>
    </div>
    <div style='clear:both;'></div>

    <div id='moreInfo'>
        <span>Invitation sent: xx-yy-zzzz</span>
    </div>
</div>

<div style='clear:both;'></div>
}

所以代码没什么特别的，我只是把表格中的所有记录排成一行。所以现在问题来了，正如你所看到的，我对相同的元素使用相同的 id。

jQuery 代码

$(document).ready(function () {
    $("#moreInfo").hide();

    $("#info").click(function(){
    $("#moreInfo").slideToggle();
});
});

好的，现在问题来了。只有第一个 div (#moreinfo) 被隐藏，所有其他的都被显示。并且只有第一个跨度 (#info) 正在切换滑块。

我尝试为 ids 设置计数器，并对每个函数进行 jquery，但没有像我想象的那样真正起作用。

泰，塞巴斯蒂安

【问题讨论】：

听起来您已经发现了问题（多个元素具有相同的id）。您尝试使用的解决方案到底有什么问题？您可以考虑改用类。
您不能有重复的 ID。请改用类选择器。

标签： php jquery

【解决方案1】：

元素 ID 应该是该元素的唯一标识符。对通用选择器使用类名：

<? while($row = mysql_fetch_array($biznis)): ?>
<div class="listItem">
    <div class="listPic">
        <img src="../../social/images/avatar/empty_avatar_full.jpg"></img>
    </div>
    <div class="listCont">
        <span>abcde<i>(request pending)</i></span>                              
    </div>
    <div class="listInfo">
        <span class="info">More info</span>
    </div>
    <div style="clear:both;"></div>
    <div class="moreInfo">
        <span>Invitation sent: xx-yy-zzzz</span>
    </div>
</div>
<div style="clear:both;"></div>
<? endwhile; ?>

并将你的 jQuery 更改为：

$(function() {
   $('.moreInfo').hide();
   $('.info').click(function() {
      $('.moreInfo').slideToggle();
   });
});

编辑

$('.info').click(function() {
   $(this).parent().siblings('.moreInfo').slideToggle();
});

【讨论】：

Ty :) 现在工作正常，只剩下一个小问题。当我单击更多信息（跨度）时，所有“listItem”-s 都会向下滑动，有任何提示或快速解决方案吗？ :)
点击信息时你想发生什么？要显示最近的moreInfo 吗？

【解决方案2】：

使用 class 而不是 ids，因为您处于 while 循环中。一个 id 只存在一次。

然后更新你的 JS。

【讨论】：