0

私はまだ問題を抱えており、それを修正する方法がわかりません。与えられた答えのおかげで、私はそれがどのように見えるかについての考えを持っていますが、それを機能させる方法がわかりません。

javascriptチェックボックスコードに問題があります。

divを非表示にする関数があります（他の投稿：javascript、右divが非表示の場合、左divは100％幅である必要があります）

しかし、ページを更新すると、チェックボックスが再びオンになり、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">

ありがとう。

4

3 に答える 3

1

ページを更新した後、「クリック」アクションに依存するため、jQueryピースは実行されません。

Webブラウザにはchecked="checked"が表示され、チェックボックスがオンになります。

Webブラウザーが回答を記憶できるように、変数を使用する必要があります。

于 2012-06-20T09:35:15.493 に答える
1

私はあなたのURLのハッシュを使用してこれを実装します。

このコードを参照してください：

// 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');
    } 
});
于 2012-06-25T11:56:11.093 に答える
1

チェックボックスをデフォルトでチェックしたくない場合は、

<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でのJSCookieのガイドです

編集

私はこれを試したことがなく、自分で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 '' ;
}

サイトウィザードから変更されたコード

于 2012-06-27T07:24:07.947 に答える