Простой код, чтобы показать пользовательский контент с куки - PullRequest
Новая
       1

Простой код, чтобы показать пользовательский контент с куки

3 голосов
/ 25 октября 2011

Я дизайнер, а не программист, и после нескольких дней поисков в Интернете, я должен обратиться за помощью. Я уверен, что это довольно просто для программиста. Мне нужен код, который позволяет пользователям устанавливать флажки для установки файлов cookie, которые будут отображать соответствующие изображения на странице.

Например, форма-флажок с параметрами [a] [b] [c], если пользователь выбирает поля [a] и [c], тогда cookie будет установлен и отобразится где-то на странице

<img src="a.gif"> <img src="c.gif">

Если пользователь возвращается к форме и выбирает другие параметры, тогда будут отображаться другие изображения. По сути, этот скрипт позволяет пользователям настраивать определенные части страницы в зависимости от доступных им опций. Срок действия файлов cookie не должен истекать, поэтому пользователи могут вернуться на свою пользовательскую страницу. Мне нужно, чтобы он был в javascript, предпочтительно с использованием jQuery, если это упростит код, поскольку я уже загружаю jQuery для других функций.

Я применил ваш код, но он не создает cookie. Чего мне не хватает в html-коде? 

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="yourcookiecode.js"></script>

</head>

<BODY>
<form>
<input type="checkbox" name="a" onClick="SetCookie('name', this.name, exp);">
<input type="checkbox" name="b" onClick="SetCookie('name', this.name, exp);">
<input type="checkbox" name="c" onClick="SetCookie('name', this.name, exp);">
</form>
</body>
</html>

1 Ответ

1 голос
/ 25 октября 2011

ОБНОВЛЕННЫЙ КОД:

См .: http://jsfiddle.net/87H7s/2/

HTML: 

<input type="checkbox" name="a">
<input type="checkbox" name="b">
<input type="checkbox" name="c">

<div id="somediv"></div>

JAVASCRIPT: 

$(document).ready(function() {
    $(':checkbox').each( function(){
         //Search if checkbox exist in cookie
        var checkbox = $(this);
         var getname = checkbox.attr('name');
         var searchCookie = $.cookie(getname);

        if(searchCookie != null) {
         //Was in div, now add img
            $(':checkbox[name*="'+getname+'"]').attr('checked',true);
            $('#somediv').append('<img src="'+getname+'.gif" />');
        }
    });


    $(':checkbox').change( function() {
        var checkbox = $(this);
        var isChecked = checkbox.is(':checked');
        var getname = checkbox.attr('name');
        if(isChecked) {
         //Add to cookie, add img
             $.cookie(getname, 'true', { expires: 7 });   
             $('#somediv').append('<img src="'+getname+'.gif" />');
        } else {
         //Unchecked, remove from cookie
            $('#somediv').find('img[src*="'+getname+'"]').remove();
            $.cookie(getname, null);
        }
    });
});

Вам нужноплагин cookie: https://github.com/carhartl/jquery-cookie

И тогда вы можете сделать что-то вроде: 

$(:checkbox).each( function(){
     //Search if checkbox exist in cookie
     var getname = checkbox.attr('name');
     var searchCookie = $.cookie(getname);

    if(searchCookie != null) {
     //Was in div, now add img
        $('#somediv').append('<img src="'+getname+'.gif" />');
    }
});


$(:checkbox).change( function() {
    var checkbox = $(this);
    var isChecked = checkbox.is(':checked');

    if(isChecked) {
         var getname = checkbox.attr('name');
     //Add to cookie, add img
         $.cookie(getname, 'true', { expires: 7 });   
         $('#somediv').append('<img src="'+getname+'" />');
    } else {
     //Unchecked, remove from cookie
        $.cookie(getname, null);
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...