Question

好吧，这对我来说非常复杂，所以我会尽力解释它。

我有一系列从php foreach循环创建的元素。输出如下：

<div class="friendStats" id="friendStats_1">
 <div class="wrapper">
      <table width="260" cellpadding="0" cellspacing="0" border="0">
        <tbody>
                <tr>
                     <td width="130" align="left" colspan="2"><input type="button" class="viewStats_1 update" name="1123456789123" value="View Stats"></td>
                </tr>
                <tr style="height:22px;">
                     <td align="left"><input type="button" id="fstatUpdate_1" class="update hidden" name="1123456789123" value="Update Stats"></td>
                     <td align="center"><span id="fstatReply_1" style="display:none; margin:0;">Stats updated!</span></td>
                </tr>
           </tbody>
     </table>
 </div>
 <div class="stats" id="friend_1">
       STATS TABLES GO HERE            
 </div>

页面上通常有几个重复的内容块，每个块的数字递增1。所以因为它们是块级元素，所以它们都在页面上相互出现，这就是我想要的，就像在列表中一样。

我需要做的是：当我点击特定块的View Stats按钮时，我希望所有其他块淡出，并让我想要查看的一个块移动到顶部这页纸。我将jQuery设置为在单击后将View Stats按钮的值更改为Hide Stats。再一次，一旦点击了Hide Stats按钮，我需要它回到之前的位置，然后淡入其他块。

因此，当我点击viewStats_x时，它将淡出除其父级之外的所有friendStats_x，然后将父friendStats_x设置为页面顶部的动画。然后再次单击viewStats_x时，其父级freindStats_x将返回到原始位置，而所有其他friendStats_x将重新显示。

friendStats_x块的数量是可变的。

单击元素内的按钮时动画父元素

0 个答案: