显示下一个不是兄弟的元素

Question

我有以下的HTML代码。我想只有当用户点击'查看更多'按钮时，才会显示类'moreDetails'

<tr class="currentRow"> 
    <td>John</td> 
    <td>Doe</td> 
    <td>johndoe@example.com</td> 

    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td></tr> 
    <tr class = moreDetails> 
    <td> 
      Additional details 
    </td> 
    </tr>   
    <tr> 

这是我的java脚本。我尝试过所有版本的next（），.parent（），prev（）等，我无法得到它的工作。你能帮忙吗？

function moreDetails(obj){ 

      $(obj).closest('.currentRow').find('moreDetails').show(); 

} 

Answer 1

变化find('moreDetails')变为find('.moreDetails')。

$(obj).closest('.currentRow').find('.moreDetails').show(); 

OR

$(obj).parent().next().show(); 

OR

$(obj).parent().next('.moreDetails').show(); 

编辑：

如果html是这个

<tr class="currentRow"> 
    <td>John</td> 
    <td>Doe</td> 
    <td>johndoe@example.com</td> 
    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td> 
</tr> 
<tr class = moreDetails> 
    <td> Additional details</td> 
</tr> 

然后使用

$(this).closest('tr').next().show(); 

Answer 2

1. <tr class = moreDetails>缺少周围的类名引号。它应该是<tr class="moreDetails">

2. 当页面加载时，按照您的要求，您需要隐藏<tr class="moreDetails"元素。因此，请使用style="display:none"将div隐藏在初始状态。

的解决方案的使用Javascript只有

function moreDetails(){ 
 
    var moreDetailElement = document.querySelector(".moreDetails"); 
 
    moreDetailElement.style.display = "inline"; 
 
}

<table> 
 
<tr class="currentRow"> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>johndoe@example.com</td> 
 

 
    <td><button type="button" class="btn btn-default" onclick="moreDetails()">View More</button></td></tr> 
 
    <tr class="moreDetails" style="display:none"> 
 
    <td> 
 
      Additional details 
 
    </td> 
 
    </tr>   
 
    </table>

Answer 3

$('button').closest('.currentRow').next('.moreDetails').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="currentRow"> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>johndoe@example.com</td> 
 

 
    <td> 
 
     <button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button> 
 
    </td> 
 
    </tr> 
 
    <tr class='moreDetails'> 
 
    <td> 
 
     Additional details 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
</table>

使用.closest()与一0。

1. 使用.closest('.currentRow')或.closest('tr')得到父tr。
2. 使用.next('.moreDetails')得到你想要显示