показать/скрыть div javascript triggering div width

поэтому я использую этот код для показа/скрытия 3 divs. и это работает как шарм.показать/скрыть div javascript triggering div width

<!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>

Но я хочу добавить немного больше к нему. вот что я хочу:

Div красный 50% ширина Зеленый 50% ширина Синий ширина 100%.

Что я хочу, это что-то вроде: Если зеленый отображается/проверен, тогда красный красный цвет равен 50%. если div green не установлен/выключен, то div red изменяется на 100%. синий всегда нормальный, и с этим ничего не изменилось.

источник

2015-10-30 Peter

Любой шансу вы можете создать jsFiddle вашего кода ? – Canvas

Пожалуйста, попробуйте следующее решение.

<!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.checked) 
      $(".red").css("width","50%"); 
     else 
      $(".red").css("width","100%"); 

    } 
    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-30 09:46:01

Привет. им очень жаль, я забыл упомянуть, что его ширина только 50% при @media max-width: 991px; включается. так что выше, что divs 100%. возможно ли что-то сделать? Мне жаль, что я не упоминал об этом в начале. – Peter

Привет снова. К сожалению, сейчас у меня проблема. Я только заметил это. Если отмечен «зеленый», и я перезагружаю страницу, ширина: 50% для красного не активируется. когда я становлюсь зеленым и снова включенным, тогда работает ширина 50%. его красный цвет не краснеет значениями 50% и 100%. Можете ли вы просить об этом? – Peter

Hello @Peter Я думаю, что вы будете хранить в базе данных. Вы можете сделать это легко, когда вам понадобится перезагрузка страницы, и будет установлен флажок. Дайте мне знать, если я ошибаюсь. –

попробовать: Его 100% работоспособный ...

<!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 ($('#chkgreen').is(':Checked')) { 
      $(".red").css('width', '50%'); 
     } 
     else { 
      $(".red").css('width', '96.8%'); 
     } 
     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" id="chkred" /> 
       red</label> 
      <label> 
       <input type="checkbox" name="colorCheckbox" value="green" id="chkgreen"/> 
       green</label> 
      <label> 
       <input type="checkbox" name="colorCheckbox" value="blue" id="chkblue"/> 
       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-30 09:48:12 Chilli

Здравствуйте. им очень жаль, я забыл упомянуть, что его ширина только 50% при @media max-width: 991px; включается. так что выше, что divs 100%. возможно ли что-то сделать? Мне жаль, что я не упоминал об этом в начале. – Peter

привет снова. Я попробовал свой код, чтобы понять, как он работает. ваша работа прекрасна, но переключатель не работает. как «проверка» и «снятие отметки» не изменяет значение с 96% до 50%, если я не перезагружу страницу. Можете ли вы просить об этом сами? это действительно странно, но значение для .red box меняется только при перезагрузке страницы. – Peter

просто добавить небольшое состояние, если в вашей работе событий мыши

if($(this).val() == 'green'){ 
     width = ($(this).prop('checked'))?'50%':'100%'; 
     $(".red").css("width",width) 
}

Js Fiddle , чтобы сделать эту работу на странице вам нужно добавить код, в котором вы просматриваете файлы cookie и установите флажок, как показано ниже.

if (document.cookie.indexOf('green=') != -1) { 
     greenEl.prop("checked", $.parseJSON(getCookieValue("green"))); 
     if(getCookieValue("green")){ // if green checkbox is check 
      $(".red").css("width","50%") // make it,s width 50% 
     } 
    }

updated fiddle

источник

2015-10-30 09:52:16

Привет. Спасибо. поэтому я попробовал это, и у меня такая же проблема с этим. он не загружается, когда я перезагружаю страницу, но когда я проверяю/снимаю галочку в зеленом поле, тогда она переходит в функцию и делает то, что она должна делать. можете ли вы дать объяснение, почему это так? – Peter

Привет снова. к сожалению, он не добавляет его в html-код, когда я проверяю исходный код с сафари. как это не делает стиль = "ширина 50%;" в источнике, если я не проверю/снял галочку с зеленого цвета. К сожалению. можете ли вы попробовать его на одной странице html? Я не думаю, что скрипка позволяет использовать файлы cookie для вывода результата. – Peter

Есть ли у вас какие-либо предложения? – Peter

Сделано fiddle для вас. Убрали некоторые функции в вашем примере, но, надеюсь, сущность существует. Кроме того, я не думаю, что он отлично отвечает на ваш вопрос, но это место для начала, если вы хотите внести изменения, на основе которых установлен флажок. Суть довольно проста, просто использовать слушатель событий, чтобы сделать изменения в CSS отдельных див вы хотите редактировать:

redEl.on("change",function(){ 
    <your logic here> 
});

Надеется, что это помогает

источник

2015-10-30 09:52:51 Coss

показать/скрыть div javascript triggering div width

ответ

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