我有一个JavaScript函数,如下所示:
function UpdateFilterView(){
if(_extraFilterExists){
if($('#F_ShowF').val() == 1){
$('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
$('#extraFilterDropDownButton').css("display", "block");
if($('#divCategoryFilter').css("display") == 'none'){
$('#divCategoryFilter').show('slow');
}
return;
}
else{
if($('#divCategoryFilter').css("display") == 'block'){
$('#divCategoryFilter').hide('slow');
}
$('#extraFilterDropDownButton').css("display", "block");
$('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
return;
}
}
else{
if($('#divCategoryFilter').css("display") != 'none'){
$('#divCategoryFilter').hide('fast');
}
$('#extraFilterDropDownButton').css("display", "none");
}
}
以下代码将触发此操作(从$(document).ready(function(){)内部:
$('#extraFilterDropDownButton').click(function () {
if($('#F_ShowF').val() == 1){
$('#F_ShowF').val(0);
}
else{
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
HTML很容易:
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
我对此有两个问题:
-
当面板被隐藏并且我们按下div按钮(extraFilterDropDownButton)时,页面的左上部分将闪烁,然后面板将被动画化。
-
当显示面板并按下div按钮时,该面板将隐藏('slow'),但是即使在UpdateFilterView脚本中进行设置,该按钮也不会更改为正确的类?
悬停按钮时,将在按钮上设置正确的类,并使用以下代码设置:
$("#extraFilterDropDownButton").hover(function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up_hover');
}
else{
$(this).attr('class','showhideExtra_down_hover');
}
},
function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up');
}
else{
$(this).attr('class','showhideExtra_down');
}
});
要完全设置一个类,而不是添加一个或删除一个,请使用以下命令:
$(this).attr("class","newclass");
这样做的好处是,您将删除可能在其中设置的所有类,并将其重置为所需的样式。至少这在一种情况下对我有用。
使用jQuery的
$(this).addClass('showhideExtra_up_hover');
和
$(this).addClass('showhideExtra_down_hover');
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
我喜欢写一个小插件来使事情更干净:
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
这样你就可以做
$('button').setClass('btn btn-primary');
本文地址:http://jquery.askforanswer.com/yongjqueryshezhilei.html
文章标签:html , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
文章标签:html , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!