Question

我在.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），显示所有其他div。只有第一个跨度（#info）才能切换滑块。

我试着把计数器放到id上，然后jquery每个函数，但没有像我想象的那样真正起作用。

Ty，Sebastian

Answer 1

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

并更新你的JS。

Answer 2

元素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(); });

php，jquery只有第一个id工作正常

2 个答案: