将一些javascript变量添加到输入的VALUE属性中

有一些js动画点可以作为文本正常工作，

var dots = 0; $(document).ready(function() { setInterval (type, 600); }); function type() { if(dots < 3) { $('#dots').append('.'); dots++; } else { $('#dots').html(''); dots = 0; } } 

但不能在输入按钮的VALUE属性中使用它（在“处理”之后）。

如何以正确的方式插入？ http://jsfiddle.net/te58dadw/2/

Answer 1

在jQuery中使用.attr('value', '.....')或.val()

 var dots = 0; $(document).ready(function() { $('#payDots').on('click', function() { $(this).attr('disabled', 'disabled'); setInterval(type, 600); }) }); function type() { var dot = '.'; if(dots < 3) { $('#payDots').val('processing' + dot.repeat(dots)); dots++; } else { $('#payDots').val('processing'); dots = 0; } } 

Answer 2

元素没有显示的.innerHTML属性。 .append()和.html()设置元素’ .innerHTML属性，而不是.value属性。

元素具有.value属性，可以使用.val(function)在jQuery中设置

 var dots = 0; var dot = "."; $(document).ready(function() { setInterval(type, 600); }); function type() { if (dots < 3) { $('input').val(function(i, val) { return val + dot }); dot.concat("."); dots++; } else { $('input').val("Pay"); dots = 0; dot = "." } } 

  HERE IT WORKS 
processing
 
 
 HERE IT DOESN"T 
  

Answer 3

你可以使用jQuery的val()来设置值，并且通过回调可以很容易地附加到值。

处理这个问题的小插件可能很有用

 $.fn.dots = function(time, dots) { return this.each(function(i,el) { clearInterval( $(el).data('dots') ); if ( time !== 0 ) { var d = 0; $(el).data('dots', setInterval(function() { $(el).val(function(_,v) { if (d < dots) { d++; return v + '.'; } else { d = 0; return v.substring(0, v.length - dots) } }) }, time)); } }); } 

你打电话给谁

 $('.elements').dots(600, 3); 

只需传递零即可取消

 $('.elements').dots(0); 

这是一个展示它是多么容易使用的演示。

 $.fn.dots = function(time, dots) { return this.each(function(i,el) { clearInterval( $(el).data('dots') ); if ( time !== 0 ) { var d = 0; $(el).data('dots', setInterval(function() { $(el).val(function(_,v) { if (d < dots) { d++; return v + '.'; } else { d = 0; return v.substring(0, v.length - dots) } }) }, time)); } }); } $(document).ready(function() { $('#dots').on('click', function() { $(this).val('Proccessing').prop('disabled',true).dots(600, 3); $('#cancel').show(); }); $('#cancel').on('click', function() { $(this).dots(200, 10); $('#dots').dots(0); setTimeout(function() { $('#dots').prop('disabled', false).val('Pay'); $('#cancel').hide().dots(0); },2000); }).hide(); });