首页 >社区问答列表 >javascript - 点击span实现样式变化！求大神帮忙

javascript - 点击span实现样式变化！求大神帮忙

阿神2017-04-11 13:20:50
[JavaScript讨论组]举报回复话题 ↕

1.点击span 使span的class属性发生变化
class="btn btn-large btn-primary"------ btn-primary这是引入样式

2.原代码

    <p id="myTab" class="pull-right">
        <a href="#listView" data-toggle="tab">
            <span class="btn btn-large" ><i class="icon-list"></i></span></a> 
        <a href="#blockView" data-toggle="tab">
            <span class="btn btn-large btn-primary"><i class="icon-th-large"> </i></span></a>
    </p>

3.目前写成这样就是不生效

    <jsp:include page="/static/common/cart_js.jsp"/>
    <script type="text/javascript">
    
         $("span").each(function(i){
            if(i==0){
                $("#listView span").on("click",function(){
    
                    $(this).addClass("btn btn-large");
                    })
            }else{
                $("#blockView span").on("click",function(){
    
                    $(this).addClass("btn btn-large btn-primary");
                    })
            }
        }); 
    </script>

4.网页效果图

求大神帮忙

以解决代码如下

 $("span").each(function(i){
  
        $("#myTab span.btn").click(function(){
            $("span").removeClass("btn-primary");
             $(this).addClass("btn-primary");
        })
    
});

全部回复（4）
我来回答

小皮 2017-04-11 13:22:504楼

<p id="myTab" class="pull-right">
    <a href="javascript:;" class="listView" data-toggle="tab">
        <span class="btn btn-large" ><i class="icon-list"></i></span></a> 
    <a href="javascript:;" class="blockView" data-toggle="tab">
        <span class="btn btn-large btn-primary"><i class="icon-th-large"> </i></span></a>
</p>

<script type="text/javascript">
    $(function(){
        $(".listView span").on("click",function(){
            //console.log($(this));
            $(this).addClass("btn btn-large");
        });
        $(".blockView span").on("click",function(){
            $(this).addClass("btn btn-large btn-primary");
        });
    });
</script>

用class吧，给a标签加

赞 +0 添加回复

阿神 2017-04-11 13:22:503楼

html

<span class="span11">span1</span>

<span class="span22">span</span>

$('span').on('click',function(){
    $(this).addClass('test');
})

css

.span11{
  color:red;
}

.span22{
  color:blue;
}

.test{
  color:yellow;
}

demo: https://jsfiddle.net/jasonHsi...
備註: 我用jquery2.2.4

赞 +0 添加回复

天蓬老师 2017-04-11 13:22:502楼
$("#listView span") 你确定这种写法能取到元素吗？
赞 +0 添加回复

大家讲道理 2017-04-11 13:22:501楼
$("#listView span")得不到这个元素
```
        <span class="btn btn-large" ><i class="icon-list"></i></span></a> 
```
$("#listView span")得不到这个元素
赞 +0 添加回复

进入小组列表 +发布话题

热门话题

javascript - 点击span实现样式变化！求大神帮忙

javascript - 点击span实现样式变化！求大神帮忙