<body>
<li><a id='original' class='original'>Original</a></li>
<li><a id='invert' class='invert'>Invert</a></li>
<script type="text/javascript">
$(".invert").click(function () {
$("body").css("filter", "invert(100%)");
sessionStorage.filter = "invert(100%)";
});
$(".original").click(function () {
$("body").css("filter", "invert(0%)");
sessionStorage.filter = "invert(0%)";
});
</script>
</body>
我如何编写此代码以拥有 1 个按钮来在 2 个功能之间切换，并将按钮上的文本从“反转”更改为“原始”
最佳答案
试试这个
<li><a id='original' class='original'>Original</a></li>
$(document).on("click", ".invert", function () {
$(this).removeClass( "invert" ).addClass( "original" );
$(this).html( "Original" );
$("body").css("filter", "invert(100%)");
sessionStorage.filter = "invert(100%)";
});
$(document).on("click", ".original", function () {
$(this).original( "invert" ).addClass( "invert" );
$(this).html( "Invert" );
$("body").css("filter", "invert(0%)");
sessionStorage.filter = "invert(0%)";
});
更好，不需要上课
$("li a").click(function () {
var caption = $(this).html();
if ( caption == "Original" )
{
$(this).html( "Invert" );
$("body").css("filter", "invert(0%)");
sessionStorage.filter = "invert(0%)";
}
else
{
$(this).html( "Original" );
$("body").css("filter", "invert(100%)");
sessionStorage.filter = "invert(100%)";
}
});
关于javascript - 如何在功能之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35402117/