jQuery ไม่ทำงานบนข้อความเปลี่ยนช่วง onclick และแสดงตารางที่ซ่อนอยู่

ฉันมีตารางเหมือนกับที่ระบุไว้ใน JSFiddle ฉันต้องการซ่อนส่วนสีเทาตั้งแต่เริ่มต้น เมื่อผู้ใช้คลิกที่ "ดูรายละเอียด" ข้อความขยายจะเปลี่ยนไปและส่วนสีเทาจะปรากฏขึ้น และในทางกลับกัน เมื่อผู้ใช้คลิกที่ "ดูรายละเอียด" อีกครั้ง ข้อความที่ขยายจะเปลี่ยนกลับไปเป็นรูปร่างเดิม และส่วนสีเทาจะถูกซ่อนไว้

ฉันได้พยายามที่จะเขียน jQuery เพื่อจัดการกับมัน แต่ฉันไม่รู้ว่าทำไมมันถึงไม่ทำงาน แม้แต่ส่วนที่เป็นสีเทาก็ไม่สามารถแสดงได้...มีใครมีข้อเสนอแนะบ้างไหม?

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

แก้ไขตามคำแนะนำโดย @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("►");
      });   
   });

html toggle jquery onclick
person Sammi    schedule 18.06.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณยังไม่ได้โหลด jquery และใช้ $(this).find('.right').html("▼"); แทน $(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
สวัสดี Dinesh ขอบคุณสำหรับข้อเสนอแนะของคุณ ฉันได้อัปเดตโพสต์ของฉันหลังจากแก้ไขบางอย่างด้วยความคิดเห็นของคุณ คุณรู้ไหมว่าฉันจะทำให้ทุก ๆ คลิกที่ฉันสามารถซ่อนและแสดงการคลิกสีเทาได้อย่างไร...สำหรับสคริปต์ของฉันตอนนี้สามารถแสดงได้เพียงครั้งเดียวเท่านั้น... - person Sammi; 18.06.2017