Question

我有以下HTML代码。我希望仅当用户点击“查看更多”按钮

时才会显示课程“moreDetails”

λ> diff w_goto.s wo_goto.s 
1c1
<   .file   "goto_skip_41709548.c"
---
>   .file   "no_goto_skip_41709548.c"

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

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

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

<tr class = moreDetails>缺少类名称旁边的引号。它应该是<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

＆＃13;

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

＆＃13;

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

＆＃13;

将.closest()与.next()一起使用。

使用.closest('.currentRow')或.closest('tr')获取父级tr。
使用.next('.moreDetails')获取您想要展示的广告

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

3 个答案: