密钥不起作用

时间:2016-07-21 06:29:51

标签: javascript jquery html css

$(document).ready(function() {
  $("#age").keyup(function() {

    var dInput = $('#age').val().replace(/,/g, "");
    console.log(dInput);

    if (dInput > 1) {
      console.log("in");
      $(".fStep2").css("display", "block");
    } else {
      $(".fStep2").css("display", "none");
    }
  });
  $("#age").blur(function() {
    var dInput = parseInt($('input:text[name=age]').val().replace(/,/g, ""));
    console.log(dInput);

    if (dInput > 1) {
      console.log("in");
      $(".fStep2").css("display", "block");
    } else {
      $(".fStep2").css("display", "none");
    }
  });
});
.fStep2 {
  background-color: orange;
  height:100px;
  margin:10px;
  padding:10px 5px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello Plunker!</h1>
<input type="text" id="age" class="age" name="age">
<div class="fStep2" id="fStep2" style="display:none;">
  <input type="text">
  <input type="text">
</div>

我正在创建一个页面,其中我创建了一个输入类型文本和div。我想div只在文本框中的值大于1时出现。但是我的div没有显示出来。我创建了一个函数。但没有得到问题。我的代码也是。

$(document).ready(function() {
    $("#age").keyup(function() {
   
          var dInput = $('#age').val().replace(/,/g, "");
        console.log(dInput);
		
		if(dInput > parseInt("1")){
        	console.log("in");
			$(".fStep2").css("display","block");
		}
		else{
			$(".fStep2").css("display","none");
		}
    });
	 $("#age").blur(function() {
        var dInput = parseInt($('input:text[name=age]').val().replace(/,/g, ""));
        console.log(dInput);
		
		if(dInput > parseInt("1")){
        	console.log("in");
			$(".fStep2").css("display","block");
		}
		else{
			$(".fStep2").css("display","none");
		}
    });
  });
<script type="text/javascript">

	

</script>
<!DOCTYPE html>
<html>

<head>

  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input type="text" id="age" class="age">
      <div class="fStep2" id="fStep2" style="display:none;">
        <input type="text" >
        <input type="text" >
        </div>    
  </body>

</html>

4 个答案:

答案 0 :(得分:0)

您没有加载jquery.js并为文本框指定名称或更改以下行

 var dInput = parseInt($('input:text[name=age]').val().replace(/,/g, ""));

使用以下

编辑脚本
$(document).ready(function() {
$("#age").keyup(function() {
    var dInput = parseInt($('input:text[name=age]').val().replace(/,/g, ""));
    console.log(dInput);

    if(dInput > parseInt("1")){
        console.log("in");
        $(".fStep2").css("display","block");
    }
    else{
        $(".fStep2").css("display","none");
    }
});
 $("#age").blur(function() {
    var dInput = parseInt($('input:text[name=age]').val().replace(/,/g, ""));
    console.log(dInput);

    if(dInput > parseInt("1")){
        console.log("in");
        $(".fStep2").css("display","block");
    }
    else{
        $(".fStep2").css("display","none");
    }
});
});

答案 1 :(得分:0)

尝试替换

$('input:text[name=age]')

$("input:text[name='age']")

答案 2 :(得分:0)

要达到预期效果,请使用以下

  var dInput = $('#age').val().replace(/,/g, "");
    console.log(dInput);

http://codepen.io/nagasai/pen/JKLyjJ

答案 3 :(得分:0)

代码中唯一的问题是缺少$(document).ready右括号和括号。 &#34;})&#34 ;.如果您点击&#34;运行代码段&#34;,您将看到脚本错误。在删除所有脚本并从代码段编辑器中添加jQuery之后,我使用您的代码片段进行了测试。所以摆脱这里不需要的所有脚本元素并正确插入jQuery。用最简单的情况进行测试。