チェックボックスを使用してテーブルのトグルフィルタを作成しようとしています。うまくいきましたが、より効率的でクリーンな方法があるかどうかを知りたいと思います。このJavaScriptコードをどのようにクリーナーにすることができますか？

これは動作し、純粋なjQueryのソリューションであるかもしれません

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

 
});

出典

2017-02-10 Hewlett

数として変数でループを使用。 – user7393973

、ありがとうございます。

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

編集：実施例

この例では唯一の作品とは、チェックボックスフィールドを使用しています。

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

出典

2017-02-10 10:58:45 Mijago

私はそれが 'nIndex + 1'であると信じています。 –

また、 'tr'ではなく' th'と 'td'を消すべきです –

あなたはどちらも正しいです。 – Mijago

このJavaScriptコードをどのようにクリーナーにすることができますか？

答えて

編集：実施例

関連する問題