Jqueryクラスがテーブル行で動作しないクラスを削除します

Question

問題の別の質問を掲載しましたが、部分的に解決されました。私は各行に1つのリンクを持つテーブルを持っています。リンクはAJAXを呼び出し、別のブートストラップ列に出力します。これは正常に動作します。リンクをクリックすると、行の背景色を変更するクラス「ハイライト」が適用されます。別のリンクをクリックすると、以前にクリックされたクリンクに「ハイライト」クラスが削除され、新しい行にクラスが適用されます。

現在、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> 

Answer 1

クリック機能でこれを試してみてください。

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

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

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