所以我有一个 jquery 选择器,我正在链接许多方法以及使用切换
So I have a jquery selector and I am chaining many methods as well as using a toggle
$(document).ready(function(){
$("header").css({
"background-color":"#93E9BE",
"color": "white",
"text-align": "center",
"font-size" : "xx-large"
}).click(function(){
$(this).toggle(function(){
$(this).css("background-color","red");
}, function(){
$(this).css("background-color", "black");
}),
})
});
.toggle()
用于显示或隐藏匹配的元素。所以要切换背景,你可以试试这个
$(document).ready(function(){
var initial = 'rgb(147, 233, 190)';
var red = 'rgb(255, 0, 0)';
var black = 'rgb(0, 0, 0)';
$("header").css({
"background-color": initial,
"color": "white",
"text-align": "center",
"font-size" : "xx-large"
}).click(function(){
if( $(this).css('background-color') === initial ){
$(this).css('background-color', red);
}else if( $(this).css('background-color') === red ){
$(this).css('background-color', black);
}else{
$(this).css("background-color", initial);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header style="height:50px;"></header>
$(document).ready(function(){
$("header").css({
"background-color":"#93E9BE",
"color": "white",
"text-align": "center",
"font-size" : "xx-large"
}).click(function(){
$(this).toggle(function(){
$(this).css("background-color","red");
}, function(){
$(this).css("background-color", "black");
}),
})
});
.toggle()
用于显示或隐藏匹配的元素。所以要切换背景,你可以试试这个
$(document).ready(function(){
var initial = 'rgb(147, 233, 190)';
var red = 'rgb(255, 0, 0)';
var black = 'rgb(0, 0, 0)';
$("header").css({
"background-color": initial,
"color": "white",
"text-align": "center",
"font-size" : "xx-large"
}).click(function(){
if( $(this).css('background-color') === initial ){
$(this).css('background-color', red);
}else if( $(this).css('background-color') === red ){
$(this).css('background-color', black);
}else{
$(this).css("background-color", initial);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header style="height:50px;"></header>