Question

我试图用JS更改项目的宽度，但由于某种原因它无法正常工作。这就是我使用$('.top').css('width', bad + '%');后代的完整代码

 var bad = 0;
var cback=function(){
  bad=0;
  $('.form :text').each(function (i,e) {
      if ($.trim($(e).val()) == "") bad++;   
    });
  $('.congrats').css("display", "block").text(bad + ' missing(Completed '+count()+')');
  //else $('.congrats').hide();
}

$(document).delegate('.form :text','focus',cback);
$(document).delegate('.form :text','keyup',cback)

function count(){
  console.log("Total inputs " + $('.form :text').length);
  //Divide by complete inputs out of 100% and get percent
  console.log("The percentage is " + bad / $('.form :text').length + "%");

  return 100-(bad / $('.form :text').length)*100 + "%"
};

$('.top').css('width', bad + '%');

当我看到HTMl时，我得到的是style="width: 0%;"任何想法？

Answer 1

在每个（）实际运行之前，在css方法中设置了bad。 Javascript不是同步的，因此每个（）方法完成$(".top").css("width, bad + "%")已经设置好了。因此需要将这段代码移到cback函数的末尾。

编辑：再看一下，如果同步或异步，问题并不重要。只有在发生某些事件时才会调用您的cback函数。当这些事件触发时，它们会更新错误，但在触发任何事件之前很久就已在css中设置了错误。即使它们被触发，css也永远不会被新的坏值更新。这就是设置css的代码应该移到cback函数中的原因。

Answer 2

变量bad在cback函数外设置为0，你设置.top元素的宽度，你需要在函数内设置宽度。

    var bad = 0;
var cback=function(){
    bad=0;
    $('.form :text').each(function (i,e) {
        if ($.trim($(e).val()) == "") bad++;
    });
    $('.congrats').css("display", "block").text(bad + ' missing(Completed '+count()+')');
    $('.top').css('width', bad + '%');
}
$(document).delegate('.form :text','focus',cback);
$(document).delegate('.form :text','keyup',cback)

function count(){
    console.log("Total inputs " + $('.form :text').length);
    //Divide by complete inputs out of 100% and get percent
    console.log("The percentage is " + bad / $('.form :text').length + "%");
    return 100-(bad / $('.form :text').length)*100 + "%"
};

Answer 3

我会改变

$('.form :text').each(function (i,e) {
  if ($.trim($(e).val()) == "") bad++;

要

$('.form :text').each(function () {
  if ($.trim($(this).val()) == "") bad++;

因为你们每个人都操作jQuery对象而不是数组

宽度不随JS变量而变化

3 个答案: