开发者社区> 问答> 正文

Javascript逻辑处理问题

screenshot用js如何处理“已选条件”的逻辑

展开
收起
小旋风柴进 2016-06-01 11:35:03 1951 0
1 条回答
写回答
取消 提交回答
  • <title>js实现类似京东的查询条件选择效果</title>
    <style>
        div.condition{border:solid 1px #eee;}
        div.condition a{margin-right:10px}
        div.condition a.selected,div.condition a:hover{background:#0094ff;color:#fff;}
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <form><input type="hidden" name="yy" /><input type="hidden" name="jy" /><input type="hidden" name="pt" />
    <div class="condition" id="dvCondition">
    <div target="yy">精品应用:<a href="#" class="selected">所有</a><a href="#">1-2周岁</a><a href="#">2-3周岁</a><a href="#">3-4周岁</a>...更多a</div>
    <div target="jy">教育专题:<a href="#" class="selected">所有</a><a href="#">数学启蒙</a><a href="#">可续探索</a>...更多a</div>
    <div target="pt">下载平台:<a href="#" class="selected">所有</a><a href="#">Android</a><a href="#">iOS</a>...更多a</div>
    <div>已选条件:<label id="lSelected"></label></div>
    </div>
    </form>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script>
        $('#dvCondition a').click(function () {
            var selectedA = $(this).addClass('selected').siblings().removeClass('selected').closest('div.condition').find('a.selected');
            var f = selectedA.closest('form')[0];//表单
            var s = selectedA.map(function () {
                console.log($(this).parent().attr('target'))
                //设置对应的条件
                f[$(this).parent().attr('target')].value = this.innerHTML == '所有' ? '' : this.innerHTML;//如果你的条件查询值是数字id而不是文字,自己给a增加自定义属性如<a href="#" myid="11">..</a>,然后改为this.getAttribute('myid')||'';,所有那个项不需要添加myid属性
                return this.innerHTML == '所有' ? null : this.innerHTML;
            }).get().join(',');
            $('#lSelected').html(s);
            return false;
        });
    2019-07-17 19:23:00
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载