클릭시 td 태그 전환

Question

여기 내 문제가 있습니다. 나는 3 개의 행이있는 테이블을 가지고있다. 각 행에는 숨겨진 '확인'아이콘 태그가있어 테이블의 행을 클릭 할 때 켜고 끕니다. 지금까지 성공적으로 작동하도록했습니다. 내가 지금하고있는 일은 한 번에 하나의 확인 표시 만 보여주는 것입니다. 한 행이 이미 선택되어 있고 다른 행을 클릭하면 이전에 확인 된 행의 선택이 취소되고 새로 선택된 행에 체크 표시가 나타납니다. 여기에 현재 HTML과 js가 있습니다.

$(document).ready(function() { 
 
    var tr = $('#eventListings').find('tr'); 
 
    $(tr).click(function() { 
 
     if ($(this).find('td i').hasClass('hide')) { 
 
     $(this).find('td i').removeClass('hide'); 
 
    } else { 
 
     $(this).find('td i').addClass('hide'); 
 
    } 
 
    }); 
 
});

<table id="events" class="table"> 
 
     <tbody> 
 
     <tr> 
 
      <td>10/19 @ 4:30 PM</td> 
 
      <td>Denver Broncos v San Francisco 49ers</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     <tr> 
 
      <td>10/23 @ 4:25 PM</td> 
 
      <td>Denver Broncos v San Diego Chargers</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     <tr> 
 
      <td>11/23 @ 6:30 PM</td> 
 
      <td>Denver Broncos v Miami Dolphins</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

Answer 1

당신은 :visible 선택기를 사용하여 볼 수 선택한 항목을 숨기고 다음과 같이 toggleClass()를 사용하여 클릭 된 항목을 전환 할 수 있습니다 :

$(document).ready(function() { 
 
    var tr = $('#events').find('tr'); 
 
    $(tr).click(function() { 
 
     $("td i:visible").addClass('hide') 
 
     $(this).find('td i').toggleClass('hide'); 
 
    }); 
 
});

/*For Demo Purpose*/ 
 

 
i::after{ 
 
    content:"checked"; 
 
} 
 
i.hide{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="events" class="table"> 
 
     <tbody> 
 
     <tr> 
 
      <td>10/19 @ 4:30 PM</td> 
 
      <td>Denver Broncos v San Francisco 49ers</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     <tr> 
 
      <td>10/23 @ 4:25 PM</td> 
 
      <td>Denver Broncos v San Diego Chargers</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     <tr> 
 
      <td>11/23 @ 6:30 PM</td> 
 
      <td>Denver Broncos v Miami Dolphins</td> 
 
      <td><i class="icon-check hide"></i></td> 
 
     </tr> 
 
     </tbody> 
 
    </table>