jQuery tidak berfungsi pada onclick mengubah teks rentang dan menampilkan tabel tersembunyi

Saya memiliki tabel seperti yang saya nyatakan di JSFiddle. Saya ingin menyembunyikan bagian abu-abu di awal. Ketika pengguna mengklik "Lihat Detail", rentang teks akan diubah dan bagian abu-abu akan ditampilkan. Begitu pula sebaliknya, ketika pengguna mengklik lagi "Lihat Detail", bentang teks akan berubah kembali ke bentuk aslinya dan bagian abu-abu akan disembunyikan.

Saya telah mencoba menulis beberapa jQuery untuk mengatasinya tetapi saya tidak tahu mengapa itu tidak berhasil. Bahkan bagian abu-abu pun tidak dapat ditampilkan... Adakah yang punya saran?

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

Diedit berdasarkan saran oleh @Dinesh: Fungsi sakelar hanya berfungsi sekali untuk satu klik... bagaimana saya bisa mengubahnya sehingga dapat diaktifkan pada setiap klik?

$('.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("►");
      });   
   });

html toggle jquery onclick
person Sammi    schedule 18.06.2017    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Anda belum memuat jquery dan menggunakan $(this).find('.right').html("▼"); alih-alih $(this).find('.right').text("▼");

var flag = false;
$('.view-detail').on('click',function(){
	$('#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>

person Dinesh undefined    schedule 18.06.2017
comment
Hai Dinesh, Terima kasih atas saran Anda. Saya telah memperbarui posting saya setelah menyesuaikan sesuatu dengan komentar Anda. Tahukah Anda bagaimana cara mengaktifkannya pada setiap klik yang dapat saya sembunyikan dan menampilkan klik abu-abu... untuk skrip saya saat ini hanya dapat ditampilkan sekali... - person Sammi; 18.06.2017