Jquery 查找活动 Class 并替换 class

Question

在上图中，当前单击了第一个“查看详细信息”，因此它显示为“隐藏详细信息”。

如果我点击第 3 个查看详细信息，所有第一个或（活动的）必须重新定位才能查看详细信息，我该怎么做..？

这是我尝试过的：

隐藏详情：

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

查看数据

$("#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，其中包含每个按钮的详细信息。

<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();
})

Jquery 查找活动 Class 并替换 class

Jquery Find Active Class And Replace that class

javascript

php

jquery

onclick

toggleclass