jQuery不工作onclick更改跨度文本和顯示隱藏表

Question

我有一個表，就像我在JSFiddle上所述的表。 我想在最開始時隱藏灰色部分。當用戶點擊「查看詳細信息」時，跨度文本將被改變，灰色部分將被顯示。反之亦然，當用戶再次點擊「查看細節」時，跨度文本將變回原始形狀，灰色部分將被隱藏。

我試圖寫一些jQuery來處理它，但我不知道它爲什麼不工作。即使是灰色的部分也不能顯示......有沒有人有任何建議呢？

$('.view-detail').on('click',function(){ 
    $('#table1 tr.show-history').css({"display":"block"}); 
    $(this).find('.right').text("▼"); 
}); 

Editted基於由@Dinesh建議： 的切換功能僅適用於點擊一次得手......我怎麼會改變它這樣，這將是在切換每次點擊？

$('.view-detail').click(function(){ 
    $('.show-history').toggle(function(){ 
     $('#table1 tr.show-history').css({"display":"block"}); 
     $(this).find('.right').html("▼"); 
    }, function(){ 
     $('#table1 tr.show-history').css({"display":"none"}); 
     $(this).find('.right').html("►"); 
     }); 
    }); 

Answer 1

您還沒有加載jQuery和使用的$(this).find('.right').html("▼");代替$(this).find('.right').text("▼");

var flag = false; 
 
$('.view-detail').on('click',function(){ 
 
\t $('#table1 tr.show-history').toggle(); 
 
    if(flag == false){ 
 
    $(this).find('.right').html("▼"); 
 
    flag = true; 
 
    }else{ 
 
    $(this).find('.right').html("►"); 
 
    flag = false; 
 
    } 
 
});

#table1{ 
 
    background-color:white; 
 
    width:500px; 
 
} 
 
.item-history{ 
 
    width:80%; 
 
    margin:0 auto; 
 
    background-color:#ebebeb; 
 
} 
 

 
.show-history{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table1"> 
 
<tr class="view-detail"> 
 
    <td> 
 
    <span class="right">&#9658;</span> View Detail 
 
    </td> 
 
</tr> 
 
<tr class="show-history"> 
 
<td> 
 
<div class="item-history"> 
 
<table> 
 
<tr><td>Row 1 History</td></tr> 
 
<tr><td>Row 2 History</td></tr> 
 
<tr><td>Row 3 History</td></tr> 
 
</table> 
 
</div> 
 
</td> 
 
</tr> 
 
<tr> 
 
    <td>Item 1 Description.........................................................................</td> 
 
</tr> 
 
<tr> 
 
<td>Total: 1 Item</td> 
 
</tr> 
 
</table>