Jquery Найти активный класс, и заменить тот класс

Question

Из вышеприведенного изображения в настоящее время первый Подробнее щёлкнул так он показывает, как скрыть детали.

если я нажимаю на 3-й вид, все 1-й или (активный) должны быть перемещены, чтобы просмотреть детали, как я могу это сделать ..?

Вот то, что я пробовал:

Скрыть детали:

$("#tbodyid").on("click", ".hide-details", function() { 
$("#participantsForGd").hide(); 
var field = $(this); 
field.text("View Details"); 
field.addClass("view-details"); 
field.removeClass("hide-details"); 
}); 

View-Datails

$("#tbodyid").on("click", ".view-details", function() { 
$("#participantsForGd").show(); 
var field = $(this); 
field.text("Hide Details"); 
field.addClass("hide-details"); 
field.removeClass("view-details"); 
}); 

Мой HTML:

<?php while($grpData = $grpQuery->fetch_assoc()){ ?> 
<tr> 
<td> 
<span id="<?php echo $grpData['group_id'];?>" class="view-details">View Details</span> 
</td> 
</tr> 
<?php } ?> 

Это один должен работать как переключатель:

<form id="participantsForGd" >BLAH BLAH </form> 

Answer 1

Ваш HTML структура не хорошо, чтобы сделать эту задачу легко. Я показываю, как вы выполняете эту задачу. Затем вы можете изменить свою потребность.

HTML:

<button class='details-btn hide-details'>Hide Details</button> 
<button class='details-btn view-details'>View Details</button> 
<button class='details-btn view-details'>View Details</button> 
<button class='details-btn view-details'>View Details</button> 

JQuery:

$('.details-btn').click(function(){ 
    $('.details-btn').each(function(){ 
     $(this).removeClass('hide-details').addClass('view-details').text('View Details'); 
    }); 
    $(this).removeClass('view-details').addClass('hide-details').text('Hide Details'); 
}) 

Answer 2

Я думаю, что ваш код PHP будет генерировать структуру DOM, как показано ниже:

<table> 
    <tbody id="tbodyid"> 
    <tr> 
     <td id="group-id-1" class="details view-details">View Details</td> 
     <td id="group-id-2" class="details view-details">View Details</td> 
     <td id="group-id-3" class="details view-details">View Details</td> 
     <td id="group-id-4" class="details view-details">View Details</td> 
    </tr> 
    </tbody> 
</table> 

И у вас есть четыре дивы, который содержит детали для каждый кнопка.

<div id="participantsForGd-1" class="participantsForGd"></div> 
<div id="participantsForGd-2" class="participantsForGd"></div> 
<div id="participantsForGd-3" class="participantsForGd"></div> 
<div id="participantsForGd-4" class="participantsForGd"></div> 

Мое решение:

$('#tbodyid').on('click', '.details', function(){ 
    $('.details').each(function(){ 
     $(this).removeClass('hide-details').addClass('view-details').text('View Details'); 
    }); 
    $('.participantsForGd').each(function(){ 
     $(this).hide(); 
    }); 
    $(this).removeClass('view-details').addClass('hide-details').text('Hide Details'); 
    $('#participantsForGd-' + $(this).attr('id').split('-')[2]).show(); 
})