Question

我正在尝试（它没有工作）根据表单输入填充元素。如果输入多于一个整数，则应更改填充。这是我的剧本。

function pad() {
if ($('input[name=amount]').val().length > 1) {
$('ibet').css('margin-left', '6px');
} else {
$('ibet').css('margin-left', '');
}
}

HTML

<p id = "ibet">$</p>

触发功能的表单

<input id='inpamount' type="text" name="amount" value="2.00" onkeyup="pad();validatemin()">

此HTML的CSS是

#ibet {
margin: 0px;
font-family: GothamBook,Helvetica,sans-serif;
color: #ffffff;
font-size: 28px;
text-align: center;
display: inline-block;
padding-left: 11px;
}

由于

Answer 1

由于您要定位元素ID，因此需要#

$('#ibet').css('margin-left', '6px');

＆＃13;

function pad() {
  if ($('input[name=amount]').val().length > 1) {
    $('#ibet').css('margin-left', '6px');
  } else {
    $('#ibet').css('margin-left', '');
  }
}

＆＃13;

#ibet {
  margin: 0px;
  font-family: GothamBook, Helvetica, sans-serif;
  font-size: 28px;
  text-align: center;
  display: inline-block;
  padding-left: 11px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<p id="ibet">$</p>

<input id='inpamount' type="text" name="amount" value="2.00" onkeyup="pad();">

＆＃13;

Answer 2

选择ID时，请务必使用#ibet而不是ibet作为选择器。您可以使用keyup()功能检测击键，并调用pad()方法。

以下是一个代码段示例。我添加了一个#ibet div，并为了清晰起见给了它一些额外的css属性。

$().ready(function() {
  $('input[name=amount]').keyup(function() {
    pad($(this));
  });
 function pad(selector) {
    if (selector.val().length > 1) {
      $('#ibet').html('LENGTH > 1<br />MARGIN: 6px');
      $('#ibet').css('margin-left', '6px');
    } else {
      $('#ibet').html('LENGTH <= 1<br />MARGIN: 0px');
      $('#ibet').css('margin-left', '');
    }
  }
 
});

#ibet {
  margin: 0px;
  font-family: GothamBook, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 28px;
  text-align: center;
  display: inline-block;
  padding-left: 11px;
 width:200px;
  height:200px;
  border: 1px solid red;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inpamount' type="text" name="amount" value="" onkeyup="pad();validatemin()">
<br /><br />
<div id="ibet"></div>

根据表单输入

2 个答案: