javascript - 为什么要点击两次才能达到预想的效果啦？求解！

问题描述

问 题

如下图所示，当我点击>符号的时候，由向下变成向上，我再点击其他的符号的时候，要点击两次才能将>变成向上,以下是我的代码：

代码：

<table class="tab">
    <thead class="thd">
        <tr>
            <th><span class="sort" onclick="sessionSort(this)">排名<i class="downArow"></i></span></th>
            <th>页面名称</th>
            <th><span class="sort" onclick="sessionSort(this)">会话发起次数<i class="downArow"></i></span></th>
            <th><span class="sort" onclick="sessionSort(this)">发起会话人数<i class="downArow"></i></span></th>
            <th><span class="sort" onclick="sessionSort(this)">会话率<i class="downArow"></i></span></th>
        </tr>
    </thead>
</tabel>

JS:

var flag = false;
function sessionSort(e) {
    // $(e).parent().siblings().children('span').children('i').removeClass('downArow');
    console.log($(e).parent().siblings().children('span').children()[0],112);
    if (flag){
        // console.log($(e).children('i').eq(0)[0].className,555)
        $(e).children('i').removeClass('upArrow').addClass('downArow');
    } else {
        $(e).children('i').removeClass('downArow').addClass('upArrow');
        $(e).children('i').attr('class') == 'upArrow'
            ? $(e).parent().siblings().children('span').children('i').removeClass('upArrow').addClass('downArow')
            :' ';
    }
    console.log( $(e).children('i').attr('class') == 'downArow',1231)
    flag = !flag;
}  

解决方案

$('.thd').on('click', '.sort', function () {

    console.log($(this).children('i').className,123)
    if ($(this).children('i')[0].className == 'upArow') {
        console.log(2)
        $(this).children('i').removeClass('upArow').addClass('downArow');
    } else if ($(this).children('i')[0].className == 'downArow') {
        console.log(1)
        $(this).children('i').removeClass('downArow').addClass('upArow');
    }
    $(this).children('i')[0].className=='upArow'?$(this).parent().siblings().children('span').children('i').removeClass('upArow').addClass('downArow'):' ';
})

这篇关于javascript - 为什么要点击两次才能达到预想的效果啦？求解！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！