Ich versuche, einen Umschaltfilter für eine Tabelle mithilfe von Kontrollkästchen zu erstellen. Es funktioniert gut, aber ich würde gerne wissen, ob es einen effizienteren und saubereren Weg gibt.Wie kann ich diesen JavaScript-Code sauberer machen?

Danke,

$(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(); 
 
    }); 
 

 
});

Quelle

2017-02-10 Hewlett

eine Schleife mit einer Variablen, die als Nummer verwenden. – user7393973

Diese funktionieren könnte und ist eine reine jQuery Lösung.

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

Edit: Arbeitsbeispiel

Dieses Beispiel funktioniert und verwendet nur die Checkbox-Felder.

$(".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>

Quelle

2017-02-10 10:58:45 Mijago

Ich glaube, dass es "nIndex + 1" sein sollte. –

Es sollte auch die 'th' und' td' verblassen, nicht die 'tr' –

Sie haben beide Recht; bearbeitet in – Mijago

Wie kann ich diesen JavaScript-Code sauberer machen?

Antwort

Edit: Arbeitsbeispiel

Verwandte Themen