2014-11-04 128 views
0

需要一些帮助。管理创建一个jQuery来改变被点击后的按钮的类,但我需要你点击一个新的按钮类被从其他人中删除。点击新按钮后删除课程

我在尝试,但我不能。我尝试了一些方法,但每当我尝试时,我都可以删除所有内容,然后单击与新类别不同的​​按钮。

任何人都可以帮助我吗?

$(document).ready(function() { 
 

 
    $('div#filters-container button').click(function() { 
 

 
    var id_button = $(this).val(); 
 
    $("#" + id_button + "").addClass("cbp-filter-item-active"); 
 

 
    }); 
 

 
});
.cbp-filter-item-active { 
 
    background-color: #5d5d5d; 
 
    color: #fff!important; 
 
    border-color: #5d5d5d 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="filters-container"> 
 
    <button value="0" id="0" href="videos2-carrega.asp">Todos</button> 
 
    <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button> 
 
    <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button> 
 
    <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button> 
 
    <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button> 
 
</div>

感谢您的关注。

+0

只显示你写的代码,而不是小提琴链接 – 2014-11-04 11:24:43

+1

代码pleeeeazzz。您将无法添加链接到jsfiddle,直到您在那里显示代码。 – nicael 2014-11-04 11:25:00

+0

请输入密码+小提琴。 – sinisake 2014-11-04 11:25:35

回答

2
​​

添加的代码行将删除其他按钮的类。 DEMO:http://jsfiddle.net/8oytw0ue/2/

其实,简单得多:

$(document).ready(function() { 

    $('div#filters-container button').click(function() { 

    $(this).addClass("cbp-filter-item-active"); 
     $(this).siblings().removeClass('cbp-filter-item-active'); 

    }); 

}); 

你不需要ID选择按钮$(这)将是确定...

+0

谢谢Evermind !!!!!!!! ! – 2014-11-04 11:31:06

+1

@Ed他是Nevermind:D – nicael 2014-11-04 11:32:07

0

$(document).ready(function() { 
 

 
    var $buttons = $('div#filters-container button').click(function() { 
 

 
    var $this = $(this).addClass("cbp-filter-item-active"); 
 
    $buttons.not($this).removeClass("cbp-filter-item-active"); 
 

 
    }); 
 

 
});
.cbp-filter-item-active { 
 
    background-color: #5d5d5d; 
 
    color: #fff!important; 
 
    border-color: #5d5d5d 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="filters-container"> 
 
    <button value="0" id="0" href="videos2-carrega.asp">Todos</button> 
 
    <button value="1" id="1" href="videos2-carrega.asp?cat=1">Família</button> 
 
    <button value="2" id="2" href="videos2-carrega.asp?cat=2">Finanças</button> 
 
    <button value="3" id="3" href="videos2-carrega.asp?cat=3">Propaganda</button> 
 
    <button value="4" id="4" href="videos2-carrega.asp?cat=4">Empreendedorismo</button> 
 
</div>

0

您可以将类添加到当前单击的元素并从同级元素中删除它们:

$('div#filters-container button').click(function() { 
    $(this).addClass("cbp-filter-item-active").siblings().removeClass('cbp-filter-item-active'); 
}); 

Working Demo

0

您可以使用此:http://jsfiddle.net/620tqr19/

$('button').on('click',function(){ 
    $('button').removeClass('active'); 
    $(this).addClass('active'); 
}); 

更改类= “活动的” 按要求。