Скрыть элемент при снятии флажка - PullRequest
Новая
       30

Скрыть элемент при снятии флажка

0 голосов
/ 23 ноября 2018

У меня предварительно установлен флажок «Использовать адрес профиля», и адрес отображается ниже.

Теперь, что мне нужно, если клиент снимает флажок, то показанный адрес будет скрыт, и новый входпоявляется сообщение добавить другой адрес.

Я пытался сделать это, используя этот JS трюк.Но не смог добиться того, чего хотел.Может кто-нибудь помочь? 

    $('#address-checked').change(function(){
        if (this.checked) {
            $('#address-sh').fadeIn('slow');
        } else {
            $('#address-sh').fadeOut('slow');
        }                   
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
    <label class="car-list-step-equipment-label">Use profile address</label>
    <address> 9 Longacre Road<br />London, GB, E17 4DT</address>
    <div id="address-sh">
      <input type="text" />
    </div>

Ответы [ 3 ]

0 голосов
/ 23 ноября 2018

и появляется новый вход с сообщением о добавлении другого адреса.

Добавьте этот новый вход и переключите отображение на основе проверки / снятия флажка, выполненного пользователем: 

$('#address-checked').change(function() {
  $('#address-sh').toggle(!this.checked);
  $('address').toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
  Enter new address: <input type="text" />
</div>
0 голосов
/ 23 ноября 2018

Вы указали идентификатор для ввода текста типа div и пытаетесь использовать адресную метку 

$('#address-checked').change(function(){
	if ($(this).is(':checked')) {
	  $('#address').fadeIn('slow');
	  $('#address-sh').fadeOut('slow');
	} else {
	$('#address').fadeOut('slow');
	  $('#address-sh').fadeIn('slow');
	 }                   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
 <label class="car-list-step-equipment-label">Use profile address</label>
          <address id="address">
            9 Longacre Road<br />
            London, GB, E17 4DT
          </address>
          
          <div id="address-sh" style="display:none;">
          <input type="text" />
          </div>
0 голосов
/ 23 ноября 2018

Вы просто скрывали / отображали неправильный элемент HTML.Изменение селектора только на элемент address устраняет проблему.Но, если пойти немного дальше, если вы инициализируете текстовое поле и его метку так, чтобы они были скрыты в начале, тогда вам вообще не нужен оператор if/else.Вы можете просто переключать адрес и текстовое поле, когда флажок установлен. 

$('#address-checked').on("change", function(){
  // You don't need and if/then here. Just toggle the visibility
  $('address').toggle('slow');
  $('.hidden').toggle('slow');              
});
.hidden { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
  9 Longacre Road<br>
  London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
  <label>Enter new address: <input type="text"></label>
</div>

Кроме того, JQuery больше не рекомендует использовать методы событий быстрого доступа, такие как change.Вместо этого рекомендуется использовать метод on(), чтобы вы передавали имя события.

И наконец (к вашему сведению), не прерывайте свои HTML-теги самостоятельно.Это оставшийся синтаксис со времен XHTML и сегодня действительно бесполезен.Фактически, использование этого синтаксиса может привести к появлению ошибок в вашем коде. Прочитайте это для деталей.

...