Jquery删除不在表行上工作的类

时间:2016-07-11 01:55:40

标签: php jquery ajax codeigniter-3

我发布了另一个问题,但部分解决了。我有一个表,每行都有一个链接。该链接调用AJAX并在另一个Bootstrap列中输出。这很好用。当我单击链接时,将应用类“突出显示”,它会更改行的背景颜色。当我点击另一个链接时,我希望先前单击的clink删除“highlight”类,并使用新行来应用该类。

目前,add类可以正常工作,但是任何其他链接点击都可以添加类,但是类永远不会删除。

<table class="table table-hover unpadded" id="mashed_tab">
                    <thead>
                        <tr>
                            <th class="artcl_hdr text-center" colspan="2">
                                <p class="big_date top_pad"><i class="fa fa-rss fa-lg concrete"></i>&nbsp; Articles/Keywords for
                                2016-07-09 - 2016-07-10</p>
                            </th>
                            <th><span class="badge bkgcol-wet-asphalt">55</span></th>
                        </tr>
                    </thead>
                    <tbody class="mashed_body">
                        <tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span><span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="425">link 1</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td></tr><tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span>
                                    <span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="405">Link 2</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td>
                        </tr>
                        <tr class="mashed_row">
                            <td class="bkgcol-sunflower wht-border">
                                <div class="date_cell">
                                    <span class="asphalt long_date">Sat</span>
                                    <span class="white day">Jul&nbsp;09,&nbsp;2016</span>
                                </div>
                            </td>
                            <td class="linked-title dark unpadded">
                                <div class="cell_link">
                                    <a href="javascript:;" id="linksplode" link_id="426">Link 3</a>
                                </div>
                            </td>
                            <td class="small-cell">
                                <i class="fa fa-arrow-right"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>


        <script type="text/javascript">
        $(document).ready(function() {
            attachEvents();
         });

         function attachEvents() {
            var selClass = 'highlight';

           $('#mashed_tab tr a').click(function() {
           $(this).parent().parent().removeClass(selClass);
           $(this).parent().parent().addClass(selClass);
          }); 
         };
    </script>

1 个答案:

答案 0 :(得分:0)

在点击功能中尝试这样的操作并告诉我。

$('tr a').click(function() { 

$("#mashed_tab tr").find("." + selClass).removeClass(selClass); 

$(this).parent().parent().addClass(selClass); });