Question

我只是在用户输入不同字段中的某些文字时才会显示div元素。

文字字段：

<input type="text" id="feedUrl" placeholder="API"

股利：

div class="col-xs-12 text-left" id="continue" style="display: none;">
    <a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

JaveScript：

if($('feedUrl').val()){
    $('#continue').show(); 
}

我遇到的问题是，只要我在feedUrl输入中写字，就不会显示继续div。

我错过了什么吗？

Answer 1

绑定事件input以捕获该输入字段的更改并检查输入的值。

请改用此选择器：

$('#feedUrl')

＆＃13;

var $feedUrl = $('#feedUrl')
$feedUrl.on('input', function() {
  var $continue = $('#continue');
  if ($(this).val()) $continue.show();
  else $continue.hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">


<div class="col-xs-12 text-left" id="continue" style="display: none;">
  <a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

＆＃13;

Answer 2

您必须在输入上设置侦听器以检测更改。同时将ID选择器修改为@bukharim，在$("#feedUrl")的评论中提及：

＆＃13;

$(document).ready(function(){
  $("#feedUrl").on("input",function(){
    if($(this).val()){
        $('#continue').show(); 
    }
    else{
        $('#continue').hide(); 
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="feedUrl" placeholder="API">


<div class="col-xs-12 text-left" id="continue" style="display: none;">
    <a class="btn btn-secondary" style="margin-top:30px;" id='continueNewFeed'>
        Continue
    </a>
</div>

＆＃13;

当用户在不同的字段中输入文本时显示div元素

2 个答案: