繁体   English   中英

Javascript,复选框未选中的div隐藏时的功能,请记住刷新页面

[英]Javascript, Function when checkbox unchecked div is hidden, remember on page refresh

我仍然有问题,我不知道如何解决。 感谢给出的答案,我对它的外观有所了解,但我不知道如何使其工作。


我的javascript复选框代码有问题。

我有一个隐藏div的功能(我的其他文章: javascript,当右div隐藏时,左div必须为100%width

但是,当我刷新页面时,该复选框将再次被选中,我阅读了一些有关cookie的内容,但我不知道该如何实现。

我的JavaScript代码:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","38%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

我的HTML代码复选框:

<input type="checkbox" checked="checked" name="foo" id="foo" />

我的Div的:

    <div class="content1" id="checked-b">
    <%= button_to "Zoek", search_index_path, :method => :get, :class => 'contentlinks' %>
    <%= button_to "Print", root_url, :class => 'contentlinks' %>
    <%= button_to "Edit", root_url, :class => 'contentlinks' %>
    <%= button_to "Add", root_url, :class => 'contentlinks' %>
<br>    

<div class="spacing">
    <%= yield %>
</div>

</div>


<div class="content2" id="checked-a">

谢谢。

刷新页面后,您的jQuery代码不执行,因为它取决于“点击”操作。

Web浏览器将看到checked =“ checked”,并且它将选中您的复选框。

您应该使用变量来帮助网络浏览器记住您的答案。

我会在您的网址中使用哈希来实现这一点。

请查看以下代码:

// set the state of your div as hash
window.location.hash = "#hide-div"; 

// now on document ready check the following
if(window.location.hash == '#hide-div') {
    // do something to hide your div and uncheck your checkbox
} 

if(window.location.hash == '#show-div') {
    // do something to show your div and ucheck your checkbox
} 

还有文档: https : //developer.mozilla.org/en/DOM/window.location

编辑:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","38%");
            window.location.hash = "#show-div"; 
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();
           window.location.hash = "#hide-div";     
        });
    });

    if(window.location.hash == '#show-div') {
        // do something to hide your div and uncheck your checkbox
        $("#foo").trigger('click');
    } 
});

如果您不希望默认情况下选中该复选框,请使用

<input type="checkbox" name="foo" id="foo" />

代替

<input type="checkbox" checked="checked" name="foo" id="foo" />

如果要在页面首次加载时检查复选框的状态,请添加此JavaScript位。

$(document).ready(function(){
    if ($("#foo").is(':checked')){
        $('#checked-b').css("width","60%");
        $('#checked-a').css("width","38%");
    } else {
        $('#checked-b').css("width","100%");
        $('#checked-a').css("width","0%").hide();
    }
});

如果您希望用户的浏览器在每次用户访问您的站点时记住“ foo”复选框的状态,则可能需要读取cookie。 这是w3schools的JS Cookies指南


编辑

我不会声称这行得通,因为我还没有尝试过,也没有亲自使用过Cookie(但是我确实重新发现Google基本上可以解决所有问题。当您花半点钱就很容易了)努力)

$(document).ready(function(){
    if (get_cookie( "fooIsChecked" ) == 1){
        $('#foo').prop("checked", true);
        $('#checked-b').css("width","60%");
        $('#checked-a').css("width","38%");
    } else {
        $('#foo').prop("checked", false);
        $('#checked-b').css("width","100%");
        $('#checked-a').css("width","0%").hide();
    }
    $("#foo").on("click",function() {
        if ($(this).is(':checked')){
            set_cookie( "fooIsChecked", "1", 30 );
            $('#checked-a').show('fast',function() {
                $('#checked-b').css("width","60%");
                $('#checked-a').css("width","38%");
            }) ;
        } else {
            set_cookie( "fooIsChecked", "0", 30 );
            $('#checked-a').show('fast',function(){
                $('#checked-b').css("width","100%").show();         
                $('#checked-a').css("width","0%").hide();
            });
        }
    });
});

function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){
    var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
        "=" + encodeURIComponent( cookie_value ) +
        "; max-age=" + 60 * 60 * 24 * lifespan_in_days +
        "; path=/" + domain_string;
}

function get_cookie ( cookie_name ){
    var cookie_string = document.cookie;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
            '(^|;)[\s]*' + cookie_name + '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

网站向导修改的代码

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM