顯示/隱藏表中的值

Question

我有一個這樣的表：

<table id="example">
<thead>
<tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
</tr>
</thead>

<tbody>
<tr>
   <td>some php to get custom field</td>
   <td>also custom field- the loop is above so this is working as it should</td>
   <td>
   <a href="#" class="showhide"> 
    <div class="more">
     .. the content I want to show when user clicks a class="showhide"
    </div>
   </a>
   </td>
<tr>
</tbody>
</table>

我試圖用jQuery實現，但沒有任何反應。 這是我嘗試過的jQuery：

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

我也用document.ready制作，但仍然無法正常工作。 還有其他方法嗎？

我想要的是，當然，當單擊class="showhide"時，div class =“ more”的內容將顯示在表中的行下方（以及下一個的前面）。

我將其與插件DataTables一起使用，但這不會引起問題。

Answer 1

您所上的課是showmore而不是showhide

現場演示

$(function() {
  $('.showmore').click(function(){
    $(this).next().toggle()
  });
});

基於OP評論編輯：我有縮短的HTML，使之簡單，把div出的a標簽。

現場演示

HTML

<table id="example">
    <tbody>
        <tr>
            <td> <a href="#" class="showhide"> Show / Hide </a>

                <div class="more">.. the content I want to show when user clicks a class="showmore"</div>
            </td>
        </tr>
    </tbody>
</table>

Java腳本

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

Answer 2

可以在標記中更改此內容：

 class="showmore"> 

對此：

 class="showhide"> 

或執行以下操作：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).next().toggle()
});

注意：

這是無效的html：

<a href="#" class="showhide"> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

更改為此：

<a href="#" class="showmore">show more</a> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

或者您可以使用.children()而不是.next()嘗試使用此方法：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).children('more').toggle();
});

在此處試用

Answer 3

$(document).on('click','.showmore',function(){
//your code..
})