jquery 显示下一个不是同级的元素

xwmevbvl  于 2023-06-29  发布在  jQuery
关注(0)|答案(3)|浏览(165)

我有以下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 script。我已经尝试了所有版本的next(),.parent(),prev()等。我不能让它工作。你能帮帮我吗

function moreDetails(obj){

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

}
ubof19bj

ubof19bj1#

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

kiayqfof2#

  1. <tr class = moreDetails>缺少类名的引号。应该是<tr class="moreDetails">
    1.当页面加载时,根据您的要求,您需要隐藏<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>
bpsygsoo

bpsygsoo3#

$('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()一起使用。
1.使用.closest('.currentRow').closest('tr')获取父树。
1.使用.next('.moreDetails')获取要显示的tr

相关问题