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

Question

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

代码：

<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;
}  

Answer 1

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

Answer 2

因为大家共用一个 flag

当我点击“>”符号的时候，由向下变成向上，我再点击其他的符号的时候，要点击两次才能将“>”变成向上

一步步来

当我点击“>”符号的时候，由向下变成向上

flag false->true(由于 flag = !flag;)

再点击其他的符号的时候

第一次
由于 flag 为 true ,进入第一个分支

$(e).children('i').removeClass('upArrow').addClass('downArow');

仍然是 downArow 状态

然后flag = !flag; flag 变为 false

第二次 才是真正执行你想要的结果

---

ps: arow/arrow 混用可不好

---

关于解决方法 我想到一种: 把状态存到一个对象里,使用前先查找是否存在这个状态

通过制造一个每个点击都不一样的 key (我这里取了点击节点的文本)

var flags = {};
function sessionSort(e) {

    var key = $(e).text();
    var flag = flags[key] == void 0 ? false : flags[key];
        console.log(flag);
        // $(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);
    flags[key] = !flag;
}  

Answer 3

HTML：

<table class="tab">
    <thead class="thd">
        <tr>
            <th><span class="sort" data-flag="down">排名<i class="downArrow"></i></span></th>
            <th>页面名称</th>
            <th><span class="sort" data-flag="down">会话发起次数<i class="downArrow"></i></span></th>
            <th><span class="sort" data-flag="down">发起会话人数<i class="downArrow"></i></span></th>
            <th><span class="sort" data-flag="down">会话率<i class="downArrow"></i></span></th>
        </tr>
    </thead>
</table>

JS：

$('.thd').on('click', '.sort', function(ev){
    var flag = $(this).data('flag');
    if (flag == 'up') {
        $(this).data('flag', 'down').children('i').removeClass('upArrow').addClass('downArrow');
        $('.upArrow').removeClass('upArrow').addClass('downArrow').parent('span').data('flag', 'down');
    } else if (flag == 'down') {
        $(this).children('i').removeClass('downArrow').addClass('upArrow');
        $(this).data('flag', 'up');
    }
    alert(flag);
})

补充了下，在“up”分支下加了句整体重置的代码，线上版本