Question

<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功能之间切换，也可以改变按钮上的文字＆＃39; Invert＆＃39;到＆＃39;原创＆＃39;

Answer 1

试试这个

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

Answer 2

请尝试下面的内容，希望这是您正在寻找的......

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
    <li><a id='original' class='original'>Original</a></li>
    <li><a id='invert' class='invert'>Invert</a></li>
<input type="button" id="changeBtn" value="invert">

<script type="text/javascript">


$("#changeBtn").click(function () {
     var caseText,caseTextPercent; 

    if(this.value == "invert"){
     caseText = "original";
     caseTextPercent=100;
    }else{
     caseText = "invert";
     caseTextPercent=0;
    }
    $(this).val(caseText);
    $("body").css("filter", caseText+"("+caseTextPercent+"%)");
    sessionStorage.filter = caseText+"("+caseTextPercent+"%)";
});


</script>       
</body>

＆＃13;

如何在功能之间切换

2 个答案: