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

Question

我有以下 HTML 代码。我希望 class 'moreDetails' 仅在用户单击 'View More' 按钮时显示

    <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();

或

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

或

$(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

<tr class = moreDetails> 缺少 class 名称两边的引号。应该是<tr class="moreDetails">
当页面加载时，根据您的要求，您需要隐藏 <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() 与 .next() 结合使用。

使用.closest('.currentRow')或.closest('tr')获取父tr.
使用.next('.moreDetails')获取你想要显示的tr

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

Display next element which is not a sibling

javascript

jquery

this

next