CODEWITHSUNDEEP
javascriptjquery
Hewlett
Hewlett

Reputation: 161

How can I make this JavaScript code cleaner?

I'm trying to create a toggle filter for a table using check-boxes. It's working fine, but I would like to know if there's a more efficient and cleaner way of doing it.

https://jsfiddle.net/xh4Lc3j4/1/

Thank you,

$(document).ready(function() {

  $(".sr-filter").find('ul').children('li:nth-child(1)').find('input').click(function() {
    $(".sr-table").find('tr').children('*:nth-child(1)').fadeToggle();
  });
  $(".sr-filter").find('ul').children('li:nth-child(2)').find('input').click(function() {
    $(".sr-table").find('tr').children('*:nth-child(2)').fadeToggle();
  });
  $(".sr-filter").find('ul').children('li:nth-child(3)').find('input').click(function() {
    $(".sr-table").find('tr').children('*:nth-child(3)').fadeToggle();
  });
  $(".sr-filter").find('ul').children('li:nth-child(4)').find('input').click(function() {
    $(".sr-table").find('tr').children('*:nth-child(4)').fadeToggle();
  });
  $(".sr-filter").find('ul').children('li:nth-child(5)').find('input').click(function() {
    $(".sr-table").find('tr').children('*:nth-child(5)').fadeToggle();
  });

});

Upvotes: 1

Views: 76

Answers (1)

Mijago
Mijago

Reputation: 1639

This might work and is a pure jQuery solution.

$(".sr-filter ul > li input").on("click", function() {
    var nIndex = $(this).parent().index() + 1;
    $(".sr-table tr *:nth-child("+nIndex+")").fadeToggle();
})

Edit: Working Example

This example works and only uses the checkbox fields.

$(".sr-filter ul > li input[type=checkbox]").on("change", function() {
    var nIndex = $(this).parent().index() + 1;
    $(".sr-table tr *:nth-child(" + nIndex + ")").fadeToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table class="sr-table">
    <tr>
      <th>Sample 1</th>
      <th>Sample 2</th>
      <th>Sample 3</th>
      <th>Sample 4</th>
      <th>Sample 5</th>
    </tr>
    <tr>
      <td>Sample 1a</td>
      <td>Sample 2a</td>
      <td>Sample 3a</td>
      <td>Sample 4a</td>
      <td>Sample 5a</td>
    </tr>
    <tr>
      <td>Sample 1b</td>
      <td>Sample 2b</td>
      <td>Sample 3b</td>
      <td>Sample 4b</td>
      <td>Sample 5b</td>
    </tr>
    <tr>
      <td>Sample 1c</td>
      <td>Sample 2c</td>
      <td>Sample 3c</td>
      <td>Sample 4c</td>
      <td>Sample 5c</td>
    </tr>
  </table>
  <div class="sr-filter">
    <ul>
      <li>
        <input type="checkbox" name="sr-filter-option" id="sr-filter-spa" checked/>
        <label for="sr-filter-spa">Sample 1</label>
      </li>
      <li>
        <input type="checkbox" name="sr-filter-option" id="sr-filter-spb" checked/>
        <label for="sr-filter-spb">Sample 2</label>
      </li>
      <li>
        <input type="checkbox" name="sr-filter-option" id="sr-filter-spc" checked/>
        <label for="sr-filter-spc">Sample 3</label>
      </li>
      <li>
        <input type="checkbox" name="sr-filter-option" id="sr-filter-spd" checked/>
        <label for="sr-filter-spd">Sample 4</label>
      </li>
      <li>
        <input type="checkbox" name="sr-filter-option" id="sr-filter-spe" checked/>
        <label for="sr-filter-spe">Sample 5</label>
      </li>
    </ul>
  </div>
</body>

Upvotes: 4

Related Questions