Показать и спрятать div по метке cookie

Как изменить источник jquery, поэтому мой сайт помнит, в каком поле пользователь проверяет, может быть, 24 часа или что-то?Показать и спрятать div по метке cookie

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Show Hide Using Checkboxes</title> 
<style type="text/css"> 
    .box{ 
     padding: 20px; 
     display: none; 
     margin-top: 20px; 
     border: 1px solid #000; 
    } 
    .red{ background: #ff0000; } 
    .green{ background: #00ff00; } 
    .blue{ background: #0000ff; } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('input[type="checkbox"]').click(function(){ 
     if($(this).attr("value")=="red"){ 
      $(".red").toggle(); 
     } 
     if($(this).attr("value")=="green"){ 
      $(".green").toggle(); 
     } 
     if($(this).attr("value")=="blue"){ 
      $(".blue").toggle(); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
    <div> 
     <label><input type="checkbox" name="colorCheckbox" value="red"> red</label> 
     <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> 
     <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> 
    </div> 
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div> 
</body> 
</html>

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

источник

2015-10-21 Peter

Добро пожаловать в переполнение стека. Я отредактировал ваше сообщение для нескольких вопросов английского языка. Скопируйте и вставьте источник здесь, а не ссылку на него. Вам нужно приложить усилия, если вы ожидаете, что другие приложат усилия, чтобы помочь вам. –

привет, его не о том, что я не хотел вставлять его, я чувствовал, что было легче по ссылке. но здесь все идет. :) спасибо за редактирование – Peter

Peter, link only posts не рекомендуется и попадает в категорию должностей низкого качества, а некоторые удаляются. Теперь, когда вы сделали вопрос хорошего качества, я проголосовал за него. –

Сохранение куки легко. Прежде всего, необходимо определить срок годности, как так:

var expiryDate = new Date(); 
    expiryDate.setDate(expiryDate.getDate() + 1); // 1 is the number of days to add, which is more intuitive than 24 hours. 
    expiryDate = expiryDate.toUTCString();

А теперь добавьте этот код в их соответствующие если блоки (те, которые получают выполняются, когда флажок щелкнули):

document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate; 
     document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate; 
     document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;

Для чтения печенье, вспомогательная функция может пригодиться, я нашел функцию ниже (сделанный Mac) здесь: https://stackoverflow.com/a/25490531/4645674

function getCookieValue(a) { 
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)'); 
    return b ? b.pop() : ''; 
}

Затем, в начале функции бежал, когда Д.О. cument готов, вы можете проверить, существуют ли файлы cookie. Если они это сделают, установите флажки, если они должны быть проверены.

var redEl = $('input[value="red"]'); 
var greenEl = $('input[value="green"]'); 
var blueEl = $('input[value="blue"]'); 

if (document.cookie.indexOf('red=') != -1) { 
    redEl.prop("checked", $.parseJSON(getCookieValue("red"))); //$.parseJSON(string) parses a boolean from a string 
} 

if (document.cookie.indexOf('green=') != -1) { 
    greenEl.prop("checked", $.parseJSON(getCookieValue("green"))); //$.parseJSON(string) parses a boolean from a string 
} 

if (document.cookie.indexOf('blue=') != -1) { 
    blueEl.prop("checked", $.parseJSON(getCookieValue("blue"))); //$.parseJSON(string) parses a boolean from a string 
}

Далее следует отображать разделы, если соответствующие флажки отмечены.

$(".red").toggle(redEl.prop("checked")); 
$(".green").toggle(greenEl.prop("checked")); 
$(".blue").toggle(blueEl.prop("checked"));

Теперь, все вместе, это должно выглядеть немного так:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Show Hide Using Checkboxes</title> 
<style type="text/css"> 
    .box{ 
     padding: 20px; 
     display: none; 
     margin-top: 20px; 
     border: 1px solid #000; 
    } 
    .red{ background: #ff0000; } 
    .green{ background: #00ff00; } 
    .blue{ background: #0000ff; } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 

function getCookieValue(a) { 
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)'); 
    return b ? b.pop() : ''; 
} 

$(document).ready(function(){ 

    var redEl = $('input[value="red"]'); 
    var greenEl = $('input[value="green"]'); 
    var blueEl = $('input[value="blue"]'); 

    if (document.cookie.indexOf('red=') != -1) { 
     redEl.prop("checked", $.parseJSON(getCookieValue("red"))); 
    } 

    if (document.cookie.indexOf('green=') != -1) { 
     greenEl.prop("checked", $.parseJSON(getCookieValue("green"))); 
    } 

    if (document.cookie.indexOf('blue=') != -1) { 
     blueEl.prop("checked", $.parseJSON(getCookieValue("blue"))); 
    } 

    $(".red").toggle(redEl.prop("checked")); 
    $(".green").toggle(greenEl.prop("checked")); 
    $(".blue").toggle(blueEl.prop("checked")); 

    $('input[type="checkbox"]').click(function(){ 

     var expiryDate = new Date(); 
     expiryDate.setDate(expiryDate.getDate() + 1); 
     expiryDate = expiryDate.toUTCString(); 

     if($(this).attr("value")=="red"){ 
      $(".red").toggle(this.checked); 
      document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate; 
     } 
     if($(this).attr("value")=="green"){ 
      $(".green").toggle(this.checked); 
      document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate; 
     } 
     if($(this).attr("value")=="blue"){ 
      $(".blue").toggle(this.checked); 
      document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
    <div> 
     <label><input type="checkbox" name="colorCheckbox" value="red"> red</label> 
     <label><input type="checkbox" name="colorCheckbox" value="green"> green</label> 
     <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label> 
    </div> 
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div> 
</body> 
</html>

Я надеялся, что это помогло!

источник

2015-10-25 07:45:19

Привет, это помогло и было очень приятно. хорошая вещь об этом заключается в том, что он проверяет/снимает флажки в зависимости от того, как вы их устанавливаете с последнего посещения. Мне понравилась эта идея. :) спасибо – Peter

@Peter Нет проблем! :) –

Я решил бы эту проблему с установленным временем истечения срока действия Cookies в течение 24 часов. JSFiddle

$(document).ready(function(){ 
    if(getCookie("checkBoxColorRed").localeCompare("true") == 0) { 
     $("#checkBoxColorRed").prop('checked', true); 
     $(".red").toggle(); 
    } 
    if(getCookie("checkBoxColorGreen").localeCompare("true") == 0) { 
     $("#checkBoxColorGreen").prop('checked', true); 
     $(".green").toggle(); 
    } 
    if(getCookie("checkBoxColorBlue").localeCompare("true") == 0) { 
     $("#checkBoxColorBlue").prop('checked', true); 
     $(".blue").toggle(); 
    } 

    $('input[type="checkbox"]').click(function(){ 
     if($(this).attr("value")=="red"){ 
      $(".red").toggle(); 
      deleteOrCreateCookie("checkBoxColorRed"); 
     } 
     if($(this).attr("value")=="green"){ 
      $(".green").toggle(); 
      deleteOrCreateCookie("checkBoxColorGreen"); 
     } 
     if($(this).attr("value")=="blue"){ 
      $(".blue").toggle(); 
      deleteOrCreateCookie("checkBoxColorBlue"); 
     } 
    }); 
}); 

function getTimeString() { 
    var d = new Date(); 
    d.setTime(d.getTime() + (1*24*60*60*1000)); 
    return "expires="+d.toUTCString(); 
} 

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1); 
     if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
    } 
    return ""; 
} 

function deleteOrCreateCookie(name) { 
    if ($("#"+name).prop('checked')) { 
     document.cookie = name + "=true; " + getTimeString(); 
    } 
    else 
    { 
     document.cookie = name +"=; -1"; 
    } 
}

HTML:

<div> 
    <label><input type="checkbox" id="checkBoxColorRed" name="colorCheckbox" value="red"> red</label> 
     <label><input type="checkbox" id="checkBoxColorGreen" name="colorCheckbox" value="green"> green</label> 
      <label><input type="checkbox" id="checkBoxColorBlue" name="colorCheckbox" value="blue"> blue</label> 
       </div> 
      <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div> 
      <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div> 
      <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

источник

2015-10-25 05:30:20 k4yaman

большое спасибо. Сначала я попробовал ваш, но затем я выбрал Tylers (как описано в другом комментарии). но большое спасибо за ваши усилия. – Peter

Показать и спрятать div по метке cookie

ответ

Смежные вопросы