如何在功能之间切换

Sam R-V 发表于 Dev

山姆RV

<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个功能之间的切换按钮，并将按钮上的文本从“反转”更改为“原始”

gurvinder372

试试这个

<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%)";
    }
});