javascript - 一个div中有两个span 点击是让span的class属性问题

Question

图片描述

一个p中有两个span 点击是让span的class属性变成class=" btn btn-large btn-primary "另一个 span class=" btn btn-large"
[1]加粗文字: /img/bVD9xx

Answer 1

HTML

<p id="p">
    <span style="background-color: red;">第一个span标签</span>
    <span style="background-color: yellowgreen;">第二个span标签</span>
</p>

---

JS

$("#p span").each(function(i){
    if(i==0){
        $("p span").on("click",function(){
               $(this).addClass("btn btn-large btn-primary");
           })
    }else{
        $("p span").on("click",function(){
            $(this).addClass("btn btn-large");
        })
    }
});

Answer 2

HTML

<p>
    <span class="btn btn-large"></span>
    <span class="btn btn-large"></span>
</p>

JS

$(function() {
    $("span").on("click", function() {
        $(this).addClass("btn-primary").siblings().removeClass("btn-primary");
    });
});

来N个span都没问题