1

.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 を使用しています。

Jクエリコード

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

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

さて、ここに問題があります。最初の div (#moreinfo) のみが非表示になり、他のすべてが表示されます。そして、最初のスパン (#info) だけがスライダーを切り替えています。

IDのカウンターを入れて、各関数をjqueryしてみましたが、想像通りにはうまくいきませんでした。

タイ、セバスチャン

4

2 に答える 2

3

while ループに入っているため、ID ではなくクラスを使用してください。ID は一度だけ存在します。

そしてあなたのJSを更新してください。

于 2013-02-17T15:33:54.987 に答える
3

要素 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();
});
于 2013-02-17T15:33:58.213 に答える