单击行时更改引导行中的glyphicon

expanding on the answers here: Bootstrap 3 collapse change chevron icon on click

在这里扩展答案:点击时Bootstrap 3折叠更改V形图标

I'm trying to get a glyph to change to up when a table row is expanded, but it's not working, and my knowledge of js is very limited. I've tried taking trante's answer

我正试图让一个字形在表格行扩展时更改为up,但它不起作用,而且我对js的了解非常有限。我试过接受trante的回答

$('.chevron_toggleable').on('click', function() {
  $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

 <span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

and modifying it as following:

并将其修改如下:

        $('.accordion-toggle').on('click', function() {
            $(this).closest("td").find("chevron_toggleable").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    });

where accordion-toggle is the class name of the row that can do the collapsing. While the row collapses as it should, the icon doesn't change. I've tried changing "td" to "table", "tr", etc and it doesn't seem to work

其中accordion-toggle是可以进行折叠的行的类名。当行按原样折叠时,图标不会改变。我已经尝试将“td”更改为“table”,“tr”等,但它似乎不起作用

Update: for APAD:

更新:对于APAD:

I'm generating the entire table using php, but here is the relevant code:

我正在使用php生成整个表,但这里是相关的代码:

   if (mysqli_num_rows($result)) {
                        echo '<table id="dasTable" cellpadding="0"      cellspacing="0" class="table table-responsive table-hover table-bordered            tablesorter">';
                    echo '<thead>';
                    echo '<tr><th>Service ID</th><th>Assigned Namespace</th><th>DAS Station</th><th>Ingest Completed</th><th>Currently Ingesting</th><th>Offsite going to DAS</th><th>Mounted</th></tr></thead>';
                    echo '<tbody>';

            // Generate rows from current das information
            while ($row2 = mysqli_fetch_row($result)) {

                    // Format cell background based on content
                    $sidvalue       = $row2[0];
                    $station        = $row2[1];
                    $used           = $row2[2];
                    $attacheddate   = $row2[3];
                    $starteddate    = $row2[4];
                    $ingestcomplete = $row2[5];
                    $ingesting      = $row2[6];
                    $updating       = $row2[7];
                    $mounted        = $row2[8];
                    $totaljobs      = $row2[9];
                    $remainingjobs  = $row2[10];
                    $assigned       = $row2[11];
                    echo '<tr class="bg-info accordion-toggle" data-toggle="collapse" id="', $sidvalue, '" data-target=".', $sidvalue, '">';
                    echo '<td><span class="glyphicon glyphicon-plus"></span> ', $sidvalue, '</td>';
                    echo '<td>', $assigned, '</td>';
                    echo '<td>', $station, '</td>';
                    echo '<td>', $ingestcomplete, '</td>';
                    if ($ingesting == 'GREEN') {
                            echo '<td class="success">YES</td>';
                    } else {
                            if ($ingestcomplete != 'NO') {
                                    echo '<td class="success">NO</td>';
                            } else {
                                    echo '<td class="danger">NO</td>';
                            }
                    }

                    if ($updating == 'GREEN') {
                            echo '<td class="success">NO</td>';
                    } else {
                            echo '<td class="danger">YES</td>';
                    }

                    if ($mounted == 'GREEN') {
                            echo '<td class="success">YES</td>';
                    } else {
                            if ($ingestcomplete != 'NO') {
                                    echo '<td class="success">NO</td>';
                            } else {

                                    echo '<td class="danger">NO</td>';
                            }
                    }
                    echo '</tr>';

                    // create the sub row
                    echo '<tr class="expand-child collapse ', $sidvalue, '">';
                    echo '<td class="h4" colspan="3"><b>Attached Date:</b> ', $attacheddate, '</td>';
                    echo '<td class="h4" colspan="4"><span class="glyphicon glyphicon-hdd"></span> ', $used, ' Bytes</td>';
                    echo '</tr>';
                    echo '<tr class="expand-child collapse ', $sidvalue, '">';
                    echo '<td class="h4" colspan="3"><b>Ingest Start Date:</b> ', $starteddate, '</td>';
                    echo '<td class="h4" colspan="4">';
                    echo '<div class="progress">';
                    if ($remainingjobs == 0) {
                            echo '<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:100%">Last Job</div>';
                    } else {
                            $jobsdone = $totaljobs - $remainingjobs;
                            $percentdone = round($jobsdone / $totaljobs *100, 1);
                            echo '<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:', $percentdone, '%">', $jobsdone, '/', $totaljobs, ' (', $percentdone, '%)</div>';
                    }
                    echo '</div>';
                    echo '</td>';
                    echo '</tr>';
            }
            echo '</tbody>';
            echo '</table><br />';
    }

This generates a table that looks like the following: 单击行时更改引导行中的glyphicon

这会生成一个如下所示的表:

When the user clicks anywhere on the row, it expands out to reveal the following: 单击行时更改引导行中的glyphicon

当用户单击该行的任何位置时,它会展开以显示以下内容:

2 个解决方案

#1

This would do the job for you:

这可以帮到你:

$('.a').on('click', function() {
  $(this).find('span').closest('.chevron_toggleable').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

considering this html:

考虑这个HTML:

<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>
<div class="a"> 
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</div>

JSFIDDLE

#2

The problem is you are using .closest, which tests the element itself and then traverses up the DOM to find the closest element - that function would not look at your tr's children. Use .find instead. It's possible that what I have below won't work, based on your document structure. But if you can write a selector that finds the correct td, just swap that out with the current selector in .find.

问题是你正在使用.closest,它测试元素本身,然后遍历DOM以找到最接近的元素 - 该函数不会查看你的tr的子节点。请改用.find。根据您的文档结构,下面的内容可能无法正常工作。但是如果你可以编写一个找到正确td的选择器,只需将它与.find中的当前选择器交换出来。

$(this).find("td").find("chevron_toggleable").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');

#1