JQuery: скрытие других переключателей / стрелок при нажатии на новый заголовок - PullRequest
Новая
       7

JQuery: скрытие других переключателей / стрелок при нажатии на новый заголовок

0 голосов
/ 29 января 2020

Я создал таблицу простой сортировщик таблиц. Я сейчас пытаюсь добавить стрелки на стол. Когда пользователь нажимает на заголовок, он сначала сортируется по убыванию. Снова нажимаем, это от наивысшего к низшему. У меня есть это, где, когда они нажимают на заголовок, стрелка переключения будет отображаться для этого заголовка. У меня есть это, где они могут переключиться обратно на четвертое, который в настоящее время работает. Но ... Если они нажимают на другой заголовок, мне нужно, чтобы другие стрелки переключения из других заголовков (кроме одного щелчка) были скрыты. Код ниже ....

Стиль 

<style>
    .active_arrow #arrow_down{
        display: none;      
    }
    .A {
        display: inline;        
    }
    .B {
        display: none;
    }
</style>

HTML

<table id="current_year" class="tablesorter" >
    <thead>
        <tr>
            <th>County <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th>Percent of eFiles Returned <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none; " /></th> 
            <th>Number of eFiles Returned <img  src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th>Total Number of Accounts Returned <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
        </tr>
    </thead>
</table>

JQUERY

<script>
    //Hiding ALL Arrows     
    $('#current_year img').hide();  

    // Click Function   
    $('#current_year th').click(function(){
        // Once click, hide any other arrows showing in headers
        //$('#current_year img').not($(this)).hide();

        // Toggle between images
        $('img',this).toggle();

        //Toggle between classes
        $(this).toggleClass("active_arrow");

        //REST OF CODE BELOW IS THE TABLE SORTER, SORTING TABLE FOR EACH HEADER'S VALUES FROM HIGHEST TO LOWEST OR VICE VERSA 
        var table = $(this).parents('table').eq(0)
        var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
        this.asc = !this.asc
        if (!this.asc){
            rows = rows.reverse()
        }
        for (var i = 0; i < rows.length; i++){table.append(rows[i])}
    })
    function comparer(index) {
        return function(a, b) {
            var valA = getCellValue(a, index).replace('%', ''), valB = getCellValue(b, index).replace('%', '')
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }
    function getCellValue(row, index){ return $(row).children('td').eq(index).text() }      
</script>

Я пытаюсь добавьте следующий код, чтобы скрыть стрелки других заголовков при щелчке в jquery (он также закомментирован выше). Теоретически, это не означает, что если щелкнуть не то, что скрыто, скрыть все остальные изображения, но я могу ошибаться.: 1011

Я пытаюсь добавить код ... Это работает для момент, когда я нажимаю на этот заголовок. Однако, если я go в другой заголовок и вернусь. Затем он покажет изображения двух стрелок и не будет правильно переключаться.

Я чувствую, что я так близок к решению, но, кажется, не могу его указать. Если они go для другого заголовка, скрыть стрелки других заголовков. Пожалуйста помоги. Что мне не хватает?

1 Ответ

0 голосов
/ 30 января 2020

Ну, я думаю, что-то понял. Вот как я заставил это работать. Если есть что-то лучше, пожалуйста, поделитесь. Я всегда ищу способы улучшить свой код.

HTML

     <table id="current_year">
         <tr>
            <th id="cur_header" >Data One<img src="images/sort_arrow_down.png" class="first_arrow" id="arrow_up" style="width:16px; height:16px; " /><img  src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th  id="cur_header" >Data Two <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none; " /></th> 
            <th  id="cur_header" >Data Three <img  src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th  id="cur_header" >Data Four <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img  src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
         </tr>
     </table>

JQuery

        $('#current_year img').hide();
        $('#current_year .first_arrow').show();         

        $('#current_year th').click(function(){ 
            $('#current_year img').not($(this)).hide();
            $('img',this).show();
            $('#arrow_down', this).hide();
            $('#arrow_up', this).show();
            $(this).click(function(){
                $('img',this).toggle();
            });                         

            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc){
                rows = rows.reverse()
            }
            for (var i = 0; i < rows.length; i++){table.append(rows[i])}
        })
        function comparer(index) {
            return function(a, b) {
                var valA = getCellValue(a, index).replace(/[%,]/g, ''), valB = getCellValue(b, index).replace(/[%,]/g, '')                  
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
            }
        }
        function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
...