Блог

Всем привет ~ В настоящее время я самостоятельно изучаю jQuery, чтобы добиться эффекта! Я опишу свою проблему, но мой английский не очень хорош, если описание не очень хорошее, пожалуйста, простите меня.

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

Я попытался использовать следующий способ написания, хочу спросить, есть ли какие-либо неправильные записи? Потому что независимо от того, есть ли значение в поле ввода, оно исчезнет. Спасибо, что посмотрели

 $(function(){
  let test = $('.input').val();
  $('.btn').on('click',function(){
   if(test == ""){
     $('.demo').css('display','none');
   }else if(test !== ""){
    $('.demo').css('display','block');
   }
  })
}) 

 .demo{
  display:inline-block;
  padding:10px;
  border:1px solid #ccc;
}

.btn{
  margin-left: 2px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <input type="text" class="input"><button class="btn">搜尋</button>
</div> 

Получите значение поля ввода по щелчку, а не при загрузке.

     $(function(){
  $('.btn').on('click',function(){
  let test = $('.input').val();
  
   if(test == ""){
     $('.demo').css('display','none');
   }else if(test != ""){
    $('.demo').css('display','block');
   }
  })
}) 

 .demo{
  display:inline-block;
  padding:10px;
  border:1px solid #ccc;
}

.btn{
  margin-left: 2px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <input type="text" class="input"><button class="btn">搜尋</button>
</div> 

Вы определяете значение поля ввода только один раз, до того, как пользователь начнет с ним взаимодействовать. Вы должны проверять значение поля ввода каждый раз, когда пользователь нажимает на кнопку:

 $(function(){
  $('.btn').on('click',function(){
   let test = $('.input').val();
   if(test == ""){
     $('.demo').css('display','none');
   }else if(test !== ""){
    $('.demo').css('display','block');
   }
  })
})