jQuery не работает с текстом диапазона изменения при нажатии и отображением скрытой таблицы

У меня есть таблица, подобная той, что я указал на 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
Привет Динеш, Спасибо за ваше предложение. Я обновил свой пост после того, как кое-что скорректировал с вашим комментарием. Знаете ли вы, как я могу заставить его переключаться при каждом щелчке, который я могу скрыть, и показать серый щелчок... для моего скрипта в настоящее время он может отображаться только один раз... - person Sammi; 18.06.2017