Question

我正在设置一个页面，其中包含一个使页面部分变暗的按钮。我修改了一些我在此处找到的代码：http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos/

但我对javascript / jQuery非常不满意，而且我不确定如何让它去做我需要的东西。

这是脚本：

$(document).ready(function(){
    $("#shadow").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
        $("#shadow").toggle();
        if ($("#shadow").is(":hidden"))
            $(this).removeClass("turnedOff");
        else
            $(this).addClass("turnedOff");
    });
});

这是一个小伙伴：http://jsfiddle.net/e2b7dxa0/

我喜欢这样，所以任何事情都可以带来＆＃34;阴影＆＃34;单击灯开关时，id变暗。现在，任何带有该ID的内容都会被隐藏，直到点击灯开关，并且无论开关是打开还是关闭，我都希望它可见。我只希望开关切换CSS中的亮度滤镜。

此外，jQuery中有一些东西导致高度扩展到页面的高度，我想删除它。

Answer 1

将亮度滤镜放在单独的类中，并在单击按钮时将该类应用于#shadow对象。

$(document).ready(function() {
    $(".lightSwitcher").on('click', function() {
        $(this).toggleClass("turnedOff");
        $('#shadow').toggleClass('filter');
    });
});

.lightSwitcher {
    position:absolute;
    z-index:101;
    background-image:url(http://i.imgur.com/pyMBQnZ.png);
    background-repeat:no-repeat;
    background-position:left;
    outline:none;
    text-decoration:none;
    margin-left: 70%;
}
#lightswitch {
    height: auto;
}
.filter {
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
    filter: brightness(50%);
}
.turnedOff {
    color:#ffff00;
    background-image:url(http://i.imgur.com/nuKtnZZ.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="lightSwitcher"><img id="lightswitch" src="http://i.imgur.com/3nawaAf.png"></a>

<div id="shadow">
    <img src="https://placeimg.com/320/240/nature">
</div>

Answer 2

http://jsfiddle.net/e2b7dxa0/2/

$(".lightSwitcher").click(function(){

        if ($("#shadow img").hasClass("brightness")){
            $("#shadow img").removeClass("brightness");
            $(this).removeClass('turnedOff')
        }

        else{
            $("#shadow img").addClass("brightness");
            $(this).addClass('turnedOff')
        }
    });

单击时打开和关闭CSS滤镜亮度

2 个答案: