jquery 点击按钮,多选同一按钮第一次点击高亮第二次取消高亮，和单选实现点击后当前背景高亮效果其余正常

jquery代码

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script>
    $(function () {
    //实现点击后标记当前菜单位置(背景高亮菜单)效果其余正常
        var cotrs = $(".appraise span");
        cotrs.click(function () {
        //当前高亮，其余正常
            $(this).addClass("on").siblings().removeClass("on");
        });
        //第一次点击高亮第二次取消高亮
        var cotrs1 = $(".impression span").val(1);
        var f = false;
        cotrs1.click(function () {
            if (f = !f) {
                $(this).removeClass("on").siblings();
            } else {
                $(this).addClass("on").siblings();
            }
        });

    });
</script>

html 部分代码

<div class="item_con appraise">
                            <span class="on">
                  <img src="" alt="">
                  <i>推荐</i>
                </span>
                            <span>
                  <img src="" alt="">
                  <i>一般</i>
                            </span>
                            <span>
                  <img src="" alt="">
                  <i>不推荐</i>
                            </span>
                        </div>
                    </div>
                    <div class="item">
                        <h3>* 平台印象</h3>
                        <div class="item_con impression">
                            <span>零费用</span>
                            <span>老板牛</span>
                            <span class="on">提现快</span>
                            <span>无语</span>
                            <span>还算明度</span>
                            <span>还不错</span>
                            <div class="add">
                                <input type="text" name="" value="" placeholder="+ 添加自定义印象">
                                <i>＋</i>
                            </div>
                        </div>
                    </div>

效果