javascript - 单击按钮时仅显示 $(this) 行表格数据

Question

我正在研究从 mysql 数据库加载数据的表中的下拉选项功能。当用户单击行内的按钮时，它会显示以前隐藏的表数据。它应该只显示其下方行中的数据，而是将其应用于具有类 $(.options) 的表中的所有行。目标是仅将其应用于包含 .button 的行下的行。这是我目前所拥有的:

CSS:

.options
{
display:none;   
}

MySql 表 PHP):

while($sound=mysql_fetch_assoc($records)){
    echo "<tbody>";
    echo "<tr>";
    echo "<td width='40' class='player'>&nbsp;&nbsp;<a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>";
    echo '<td width="250" class="name">'.$sound['name'].'&nbsp;&nbsp;&nbsp;<span class="red date">'.$sound['date'].'</span></td>';
    echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>";
    echo "<td width='72' class='length'>".$sound['length']."</td>";
    echo "<td width='275' class='keywords'>".$sound['keywords']."</td>";
    echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>";
    echo "</tr>";
    echo "<tr>";
    echo "<td  height='100' class='options' colspan='1'></td>";
    echo "<td class='options' colspan='1'>mp3</td>";
    echo "<td class='options' colspan='2'>wav</td>";
    echo "<td class='options' colspan='2'>tracked out</td>";
    echo "</tr>";
    echo "</tbody>";

Jquery函数:

    $(".button").on('click', function(){
        $('.options').css('display', function(i,v){return v=='none' ? 'inline' : 'none' });
    });

Answer 1

您可以在 jQuery 函数中使用这样的代码:

$(".button").on('click', function(){
    // use $(this) to get the element that was clicked. In this case it will be img element
    $(this)
       // find a parent of type tr, that is a row
       .parents('tr')
       // find the next row
       .next('tr')
       // manipulate the item
       .css('display', function(i,v){return v=='none' ? 'inline' : 'none' });
});

或者由于您只进行显示/隐藏操作，您可以使用 toggle() function 而不是 .css() 函数